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

【问题标题】：How to access Vuex module getters and mutations?如何访问 Vuex 模块的 getter 和 mutation？
【发布时间】：2021-09-15 21:30:53
【问题描述】：

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

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

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

【问题讨论】：

同意：vuex 的文档非常糟糕。真的没有帮助。
@geoidesic 我肯定注意到了可以更好的领域。您是否考虑过在 GitHub 上提出问题并提出改进建议？

标签： vue.js vuex

【解决方案1】：

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

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

【讨论】：

啊，好的！这是否取决于设置namespaced: true？
@JohnMoore 是的，很抱歉没有提到它，您想要分离的任何模块都需要设置namespaced: true,。如果不是，那么它将继承父模块的命名空间。
@JustinMacArthur 如果您尝试从组合 api setup() 方法中访问它，这种从 vuex 存储中的模块访问数据的方法是否也有效？
@PA-GW 这是为 V2.x 和相应的 Vuex 编写的。我不确定它是否适用于组合 API。我不明白为什么不取决于执行时间。

【解决方案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。

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

【讨论】：

所以我在添加 namespaced=true 之前使用 return store.getters.individuals，现在我必须使用 return store.getters['individual/individuals'] 感谢您提供这个额外的答案。花了半个小时，发现零个访问命名空间吸气剂的例子，直到你在这里回答。
改变的原因对我来说应该是显而易见的。对于名称中包含特殊字符（如“/”）的属性，您不能使用点表示法，因此您必须使用方括号表示法。在所有情况下都可以使用括号表示法，它只是不那么优雅。所以经常使用点表示法，除非它不能像这个例子中那样。
不要忘记在每个模块中设置namespaced: true，以便能够使用这样的getter。
感谢您补充接受的答案中未公开的吸气剂部分...您让我开心
访问命名空间的getter！是的！谢谢！为什么？.. 为什么他们没有在文档中包含这个？ ??‍♂️

【解决方案3】：

作为已接受答案的另一个补充，如果您需要将参数传递给 getter（例如从商店集合中获取特定项目），您需要按如下方式传递它：

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

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

【讨论】：

使用 Vuex4，在组合 API 的设置中，我添加了以下内容。 setup(props) { const store = useStore() const randomNumber = computed(() => store.getters['item/getRandomNumber']) return { randomNumber }; }，但出现 lint 错误：@typescript-eslint/no-unsafe-member-access: Unsafe member access ['item/getRandomNumber'] on an any value。

【解决方案4】：

使用 Vuex mapGetters 和 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>

【讨论】：

【解决方案5】：

mapGetters 助手只是将存储 getter 映射到本地计算属性：

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

【讨论】：

这并没有说明问题的核心：如何访问特定的 vuex module's getter

【解决方案6】：

试试这个方法！

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

auth 是我的模块名称，getToken 是我的 getter。

【讨论】：

【解决方案7】：

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

【讨论】：