如何访问Vuex模块的getter和mutation?

wztqucjr  于 2022-11-17  发布在  Vue.js
关注(0)|答案(8)|浏览(257)

我试图改用Vuex而不是我自己开发的store对象,我必须说我发现文档不如Vue.js世界中的其他地方清晰。假设我有一个名为'products'的Vuex模块,它有自己的状态、变异、getter等。我如何引用该模块中名为'clearWorking Data'的操作?文档给予了访问模块状态的示例:

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

但是我看不到任何关于getter、突变、动作等的信息。

piok6c0g

piok6c0g1#

除了可接受的答案之外,我还想为答案中缺少的getter提供一个变通方法。

调试存储区

在任何情况下,您都可以调用console.log(this.$store)来调试应用商店。
如果这样做,您将看到getter在其名称中以名称空间为前缀。

访问命名空间getter

this.$store.getters['yourModuleName/someGetterMethod']

分派命名空间

this.$store.dispatch('yourModuleName/doSomething')

使用参数分配名称空间

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

结论

关键是像Justin解释的那样,像文件系统一样处理命名空间。

编辑:找到了一个用于处理vuex Store的不错的库

除了基本知识之外,我还想添加这个vuex库,作为一个很好的补充,以便有效和快速地使用vuex存储。https://github.com/davestewart/vuex-pathify
它看起来非常有趣,并且非常关心您的配置,还允许您直接使用VUEX处理2waybinding。

**编辑:感谢其他的答案。添加了调度方法与参数的完整性。

5sxhfpxr

5sxhfpxr2#

在你的例子中,它是store.dispatch('products/clearWorkingData'),你可以把actions/mutation看作一个文件系统,模块嵌套得越深,它们在树中的位置就越深。
所以如果你有一个三层深的树,你可以去store.commit('first/second/third/method')

xiozqbni

xiozqbni3#

作为可接受答案的另一个补充,如果需要将参数传递给getter(例如,从存储集合中获取特定项),则需要按如下方式传递:

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

我不认为我非常喜欢这个符号,但它就是它--至少目前是这样。

6pp0gazn

6pp0gazn4#

试试这个方法!

getCounter(){
  return this.$store.getters['auth/getToken'];     
}

auth是我的模块名,getToken是我的getter。

brc7rcf0

brc7rcf05#

使用Vuex mapGetter和mapActions,你现在可以很容易地做到这一点。
假设您的商店模块'products'有一个名为'mostPopular'的getter和一个名为'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>
jfgube3f

jfgube3f6#

mapGetters helper只是将存储getterMap到本地计算属性:

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'
})
uurv41yg

uurv41yg7#

在配置特定存储对象时,必须注意使用namespaced: true

9jyewag0

9jyewag08#

除了公认的答案之外,我觉得改变状态并直接在组件中提交改变不是一个好主意。我遵循的经验法则是,总是使用一个操作来提交改变,而状态只在改变内改变。使用getter来获得转换后的状态。
可以使用mapGetters将getterMap到computed,使用mapActions将actionMap到方法,如下例所示

// component.vue
// namespace_name=products

<template>
  <div>
    <p> This is awesome product {{getRecentProduct}} </p>
  </div>
  <button @click="onButtonClick()"> Clear recent</button>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
  computed: {
    ...mapGetters({
        getRecentProduct: "products/getRecentProduct",
    }),
    anotherComputed(){
        return "anotherOne"
    }
  },
  methods: {
     ...mapActions({
        clearRecentProduct: "products/clearRecentProduct",
    }),
    onButtonClick(){
        this.clearRecentProduct(); /// Dispatch the action 
    },
    anotherMethods(){
        console.log(this.getRecentProduct); // Access computed props
    }
  }
};
</script>

相关问题