Vuexの補助関数の使い方

マップ状態

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

エクスポートデフォルト{
  // ...
  計算:{
     ...mapState({
         // 矢印関数はコードをより簡潔にすることができます count: state => state.count,
         // 文字列パラメータ 'count' を渡すことは `state => state.count` と同等です
         countエイリアス: 'count',

         // `this` を使用してローカル状態を取得できるようにするには、通常の関数 countPlusLocalState (state) { を使用する必要があります。
             state.count + this.localCount を返す
         }
  	})
  }
}

定義された属性名が状態内の名前と同じ場合は、配列を渡すことができる。

//状態を定義する
定数状態 = {
    カウント:1,
}

//コンポーネントで計算された補助関数を使用します:{
    ...mapState(['count'])
}

マップゲッター

計算:{
    ...mapGetters({
      // `this.doneCount` を `this.$store.getters.doneTodosCount` にマップします
      完了数: 'doneTodosCount'
    })
}

プロパティ名がゲッターで定義されているものと同じ場合は、配列を渡すことができる。

計算:{
  計算: {
  // オブジェクトスプレッド演算子を使用して、計算されたオブジェクトにゲッターを混ぜます...mapGetters([
      '完了したTodosCount'、
      '別のゲッター'、
      // ...
    ])
  }
}

要約:

mapStateとmapGettersはどちらもマッピングにcomputedを使用します
コンポーネント内でマッピングした後、これを介して使用します。マッピング属性名

マップミューテーション

方法:{
    ...mapMutations({
        add: 'increment' // `this.add()` を `this.$store.commit('increment')` にマップします
    })
}

プロパティ名がmapMutatiosで定義されているものと同じ場合は、配列を渡すことができる。

方法:{
    ...mapMutations([
        'increment', // `this.increment()` を `this.$store.commit('increment')` にマップします

        // `mapMutations` はペイロードもサポートします:
        'incrementBy' // `this.incrementBy(amount)` を `this.$store.commit('incrementBy', amount)` にマッピングします
    ]）、
}

マップアクション

方法:{
    ...マップアクション({
        add: 'increment' // `this.add()` を `this.$store.dispatch('increment')` にマップします
    })
}

属性名がmapActiosで定義されているものと同じ場合、配列を渡すことができる。

方法:{
    ...マップアクション([
        'increment', // `this.increment()` を `this.$store.dispatch('increment')` にマップします	
        // `mapActions` はペイロードもサポートします:
        'incrementBy' // `this.incrementBy(amount)` を `this.$store.dispatch('incrementBy', amount)` にマッピングします
    ]）、
}

要約する

mapMutationsとmapActiosは両方ともメソッドにマッピングされます
マッピング後、メソッドになる

複数のモジュール

補助機能を使用しない場合、

this.$store.commit('app/addCount')

ヘルパー関数を使用します。ヘルパー関数の最初のパラメータは、指定された名前空間へのパスです。

計算: {
  ...mapState('some/nested/module', {
    a: 状態 => 状態.a、
    b: 状態 => 状態.b
  })
},
メソッド: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

または、createNamespacedHelpers関数を使用して、名前空間ベースのヘルパー関数を作成します。

'vuex' から { createNamespacedHelpers } をインポートします。

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') // パスが指定されている // 前と同じメソッドを使用する export default {
  計算: {
    // `some/nested/module` 内を参照...mapState({
      a: 状態 => 状態.a、
      b: 状態 => 状態.b
    })
  },
  メソッド: {
    // `some/nested/module` 内を検索...mapActions([
      'フー'、
      'バー'
    ])
  }
}

以上がvuexの補助機能の使い方の詳しい内容です。vuexの補助機能についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください！

以下もご興味があるかもしれません: