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

Question

我正在尝试改用 Vuex 而不是我自己开发的 store 对象，我必须说我没有找到像 Vue.js 世界中其他地方那样清晰的文档。假设我有一个名为“products”的 Vuex 模块，它有自己的状态、突变、getter 等。我如何引用该模块中名为“clearWorking Data”的操作？文档给出了访问模块状态的示例：

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

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

原文由 John Moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的示例中，它将是 store.dispatch('products/clearWorkingData') 您可以在某种程度上将操作/突变视为文件系统。模块嵌套得越深，它们在树中就越深。

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

原文由 Justin MacArthur 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

除了接受的答案之外，我还想为您提供答案中缺少的 getter 的解决方法。

调试商店

在任何情况下，您都可以调用 console.log(this.$store) 来调试 Store。

如果这样做，您将看到 getter 的名称中以命名空间为前缀。

访问命名空间的 getter

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

分派命名空间

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

以参数命名的调度

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

结论

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

编辑：找到了一个很好的库来处理 vuex 商店

除了基本知识之外，我还想添加这个 vuex 库作为一个很好的补充，以便有效和快速地使用 vuex 商店。 https://github.com/davestewart/vuex-pathify 。

它看起来很有趣，并且很关心您的配置，还允许您直接使用 vuex 处理 2waybinding。

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

原文由 Gkiokan 发布，翻译遵循 CC BY-SA 4.0 许可协议