TSX での Vuex 変換計画: TS 変換 Vue2 プロジェクトで Vuex を扱うにはどうすればよいですか?

現在最も人気のある vuex には、vuex-aggregate、vuex-class、vuex-module-decorators が含まれます。

npm が関連するものを見つけました。傾向グラフを見てください: vuex-aggregate vs vuex-class vs vuex-class-component vs vuex-class-module vs vuex-class-modules vs vuex-module-decorators | npm トレンド

	出演者	問題	バージョン	更新しました	作成した
vuex-集約	14	19	4.1.3	4年前	4年前
vuexクラス	1,670	18	0.3.2	3年前	5年前
vuex クラスコンポーネント	213	40	2.3.6	2ヶ月前	3年前
vuex クラスモジュール			0.0.16	3年前	5年前
vuex クラスモジュール	175	17	1.3.0	一年前	3年前
vuex-モジュール-デコレータ	1,705	131	2.0.0	2ヶ月前	4年前

実際に比較できるのは vuex-class と vuex-module-decorators ですが、個人的には vuex-class の方が好みですもちろん、両者を組み合わせて使用することもできます。1 つはストアで定義され、もう 1 つは vue コンポーネントで使用されます。

vuexクラス

プロジェクトアドレス: GitHub - ktsn/vuex-class: Vuex および vue-class-component のバインディングヘルパー. このものは 3 年間更新されていませんが、何も問題はありません。

これは、vue-class-component と組み合わせて使用する必要があります。

import { コンポーネントを tsc } から 'vue-tsx-support'; 
import { Component, Prop } from 'vue-property-decorator'; 
import { State, Getter, Action, Mutation, namespace} from 'vuex-class' 
const someModule = namespace('path/to/module') 
@Component 
export デフォルト クラス Demo extends tsc<Props> { 
    @State(state => state .bar) stateBar 
    @Getter('foo') getterFoo 
    @someModule.Getter('foo') moduleGetterFoo 
    render(){ 
        retrun ( 
            <div>demo</div> 
        ) 
    } 
}

これを使用すると、デコレーターを介してコンポーネントで使用する場合に便利で、元の vuex ストアをまったく変更する必要はありません。

ただし、@vue/composition-api を使用する場合、vue-class は使用できません。ここでは vuex-module-decorators を使用することをお勧めします。

vuex-モジュール-デコレータ

项目地址：GitHub - Championswimmer/vuex-module-decorators: Vuex モジュールを宣言的に作成するための TypeScript/ES7 デコレータ

公式ドキュメント:名前空間モジュール | vuex-module-decorators

これはストアモジュールを定義するのに便利です

import { モジュール、VuexModule、ミューテーション、アクション } from 'vuex-module-decorators'
エクスポート インターフェイス UserInfo {
  名前: 文字列; 
  age:number 
} 
@Module 
export default class UserInfo extends VuexModule { 
  name = 'zhoulujun' 
  age = 30 

  @Mutation 
  setUser(user: UserInfo) { 
    this.name = user.name 
  } 
  // アクション 'incr' は突然変異 'increment' をコミットします戻り値をペイロードとして完了
  @Action({ commit: 'setUser' }) 
  getUser() { 
    // これを直接使用することはできません。
  getUser(id) { 
    return http.getUser(id).then((user)=>{ 
        this.context.commit('setUser', user); 
    }) 
  } 
}

ストアの作成

「vue」から Vue をインポートします。
「vuex」から Vuex をインポートします。
import { UserInfo } から './modules/user'; 

Vue.use(Vuex); 

エクスポートインターフェイス IRootState {
  ユーザー: UserInfo 
}
デフォルトのエクスポート new Vuex.Store<IRootState>({ 
  // モジュール: { 
  // ユーザー: User, 
  // }, 

});

ここで注意しなければならない点は、@Action デコレータ内の関数が @Mutation デコレータメソッドを直接呼び出すことです。

@MutationAction

vuex では、コミットを通じてステート内のデータを変更する必要がありますが、vuex-module-decorators にはステートデータを直接変更できる MutationAction 修飾子があります。

import default classPassengerStore extends VuexModule { 
  public username = ''; 
  public password = ''; 
 
  //'username' と 'password' は返されたオブジェクトで置き換えられます、
  //形式は `{username:...,password である必要があります:. ..}`  
  @MutationAction({ mutate: ['username', 'password'] }) 
  async setPassenger(name: string) { 
    const response: any = await request(name); // インターフェイスは [{name] を返します:'Zhang三',password:'123456'}] 
    //ここでの戻り値は、上記の変更後の名前と一致する必要があります; 
    return { 
      username:response[0].name, 
      password:response[0].password, 
    } ; 
  } 
}

ただし、この方法では構造データが決定されている必要があります。私たちは今でもこれをあまり使用しません。

通常、this.context.commit はアクションで直接使用されます。

vuex クラスモジュール

vuex-module-decorators と同様のものです。詳細な使用法については、vuex モジュールの Typescript クラスデコレーター | BestofVueを参照してください。

他に言うことはあまりありません。

vue-class と vuex-module-decorators の組み合わせ

つまり、ストアデータ部分では vuex-module-decorators が使用され、コンポーネント内ではストアの呼び出しに vue-class が使用されます。

これは、上記の最初の 2 つのコードを集めたものです。

@vue/composition-api は vue2 コンポーネントを作成しますが、将来的には簡単に vue3 にアップグレードできます。ただし、vue-class-component には将来的に vue3 バージョンも登場する予定です。

個人的なレベルでは、@vue/composition-api クラスの継承の側面に非常に不快感を感じています。

記事を参照してください:
型付き Vuex の状態: 最もクリーンなアプローチ https://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230

Vue と TypeScript の初めての体験 - Vuex の使用 (vuex-module-decorators) Vue と TypeScript の初めての体験 - Vuex の使用 (vuex-module-decorators) - Nuggets

当サイトの記事「TSXにおけるVuexの変革計画：TS化Vue2プロジェクトにおけるVuexの扱い方は？」より転載》は
出典を明記してください: TSX での Vuex 変換計画: TS 変換 Vue2 プロジェクトで Vuex を扱うには? - vueエントリー概要 - Zhou Junjun個人サイト