web-dev-qa-db-ja.com

Vuexモジュールのゲッターと突然変異にアクセスする方法は？

自家製のストアオブジェクトの代わりにVuexの使用に切り替えようとしていますが、Vue.jsの世界の他の場所ほど明確なドキュメントを見つけられないと言わなければなりません。独自の状態、ミューテーション、ゲッターなどを備えた「製品」と呼ばれるVuexモジュールがあるとします。「clearWorking Data」と呼ばれるそのモジュール内のアクションを参照するにはどうすればよいですか？ドキュメントには、モジュールの状態にアクセスする次の例があります。

store.state.a // -> moduleA's state

しかし、ゲッター、突然変異、アクションなどについては何もわかりません。

vue.jsvuex
34
John Moore

あなたの例では、store.dispatch('products/clearWorkingData')になります。何らかの方法でアクション/突然変異をファイルシステムと考えることができます。モジュールがより深くネストされるほど、それらはより深いツリーになります。

したがって、3レベルの深さのツリーがある場合は、store.commit('first/second/third/method')に行くことができます。

23
Justin MacArthur

受け入れられた回答に加えて、回答にないゲッターの回避策を提供したいと思います。

ストアのデバッグ
いずれの場合でも、console.log(this.$store)を呼び出してストアをデバッグできます。
そうすると、ゲッターの名前に名前空間の接頭辞が付いていることがわかります。 enter image description here

名前空間ゲッターにアクセス
this.$store.getters['yourModuleName/someGetterMethod']

名前空間のディスパッチ
this.$store.dispatch('yourModuleName/doSomething')

paramsで名前空間をディスパッチします
this.$store.getters['yourModuleName/someGetterMethod'](myParam)

結論
キーは、ジャスティンが説明したようなファイルシステムのような名前空間を処理することです。

編集：vuexストアを処理するための素敵なライブラリを見つけました
。 https://github.com/davestewart/vuex-pathify .
非常に面白く、設定の大部分を考慮し、vuexで2waybindingを直接処理することもできます。

**Edit：他の回答に感謝します。全体性のためのparamsを使用したDispatchingメソッドが追加されました。

65
Gkiokan

受け入れられた答えへの別の追加として、パラメータをゲッターに渡す必要がある場合（たとえば、ストアコレクションから特定のアイテムを取得するため）、次のように渡す必要があります。

this.$store.getters['yourModuleName/someGetterMethod'](myParam)

私はこの表記法があまり好きではないと思いますが、それはそうです-少なくとも今のところは。

14
Peter Kassenaar

MapGettersヘルパーは、ストアのゲッターをローカルの計算されたプロパティに単にマップします。

    import { mapGetters } from 'vuex'

    export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
If you want to map a getter to a different name, use an object:

    ...mapGetters({
  // map `this.doneCount` to `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})
1
Bhushan Patil

Vuex mapGettersとmapActionsを使用すると、これを非常に簡単に行うことができます。しかし、私は同意します、それはまだドキュメントであまり明白ではありません。

ストアモジュール「products」に「mostPopular」と呼ばれるゲッターと「clearWorkingData」と呼ばれるアクションがあると仮定します。

<template>
 <div>
  <p>{{mostPopularProduct}}<p>
  <p><button @click="clearProductData">Clear data</button></p>
 </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
 computed: mapGetters({
  mostPopularProduct: "products/mostPopular"
 }),
 methods: mapActions({
  clearProductData: "products/clearWorkingData"
 })
}
</script>
1
Ben Hoffmann