VueのVuexの4つの補助機能について

1. 補助機能

コンポーネントが複数の状態を取得する必要がある場合、これらすべての状態を計算プロパティとして宣言すると、多少の繰り返しと冗長性が生じます。この問題を解決するには、計算されたプロパティを生成するmapStateヘルパー関数を使用して、キー入力を節約します。

スクリプトに補助関数を導入します。

'vuex' から { mapState、mapMutations、mapActions、mapGetters } をインポートします。

2. 例

1. mapState と mapGetters

stateとgettersプロパティ、つまり特定の値を返すため、 mapStateとmapGetters計算プロパティcomputedに配置する必要があります。

例えば：

これで、ストアの状態にプロパティ userName が存在します。

Home.vue コンポーネントでは、mapState を通じて取得され、インターフェースに表示されます。

計算されたコード:

  計算:{
    //補助関数を通じてストア内の状態を取得する
    ...mapState(['ユーザー名'])
    //同等: 次の通常の計算プロパティコード /* userName (){
      this.$store.state.userName を返します
    }*/
  }

ページの呼び出し:

結果：

このように、単純な...mapState(['userName'])を使用して、比較的長い計算プロパティ関数を置き換えることができます。
mapGettersの使い方はmapStateと同じです。computed computed呼び出すことができます。ここではmapStateのみを例として取り上げます。

2. mapMutations と mapActions

mutationsとactions関数を返すため、コンポーネントの methods プロパティに配置する必要があります。

例えば：

現在、 storeのmutationsには、現在のユーザーにウェルカム ウィンドウをポップアップ表示するヒント機能があります。

上の図のmethods内のコードは、ストア内のミューテーションを取得するためのショートカットです。

  方法:{
    // ストア内のミューテーションを取得するための略語
    ...mapMutations(['tip'])
    ///* tip(){ と同等
      this.$store.commit('tip');
    }*/
  }

コンポーネントの呼び出し: created関数内の tip メソッドを呼び出して、ウェルカム ポップアップ ウィンドウを実装します。

mapActionsとmapMutationsの使用方法は同じです。つまり、これらはnethodsで宣言できるため、ストア内のアクションとミューテーションの参照が簡単になります。

上記の例からわかるように、補助関数の利点は、ストア内の状態、ゲッター、ミューテーション、アクションの取得を簡素化できることです。もちろん、補助機能を使用しなくても上記の機能を実現できますが、コンポーネント内で複数の状態を同時に使用する必要がある場合は、補助機能を使用すると便利になります。

以上で、VueのVuexの4つの補助機能についての記事は終了です。Vuexの補助機能に関するより詳しい内容は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。