首页 文章

如何访问Vuex模块获取器和突变?

提问于
浏览
18

我正在尝试切换到使用Vuex而不是我自己开发的商店对象,我必须说我没有像Vue.js世界其他地方那样清楚地找到文档 . 假设我有一个名为'products'的Vuex模块,它有自己的状态,突变,getter等 . 我如何在该模块中引用一个名为'clearWorking Data'的动作?文档提供了访问模块状态的示例:

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

但是我无法看到关于吸气剂,突变,动作等的任何信息 .

2 回答

  • 36

    在您的示例中,您可以将动作/突变视为某种方式的文件系统 store.dispatch('products/clearWorkingData') . 模块越深入嵌套在树中越深 .

    所以你可以去 store.commit('first/second/third/method') 如果你有一个三层深的树 .

  • 13

    除了接受的答案,我想为你提供答案中缺少的吸气剂的工作范围 .

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

    Access namespaced getter
    this.$store.getters['yourModuleName/someGetterMethod']

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

    Conclusion
    关键是处理命名空间就像Justin解释的文件系统一样 .

    Edit: found a nice library for handling vuex Store
    除了基本知识之外,我还想添加这个vuex库作为vuex商店有效和快速工作的一个很好的补充 . https://github.com/davestewart/vuex-pathify .
    它看起来非常有趣并且非常关心您的配置,并且还允许您直接使用vuex处理2waybinding .

相关问题