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

Question

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

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

但是我无法看到关于吸气剂，突变，行动等的任何信息。

Answer 1

除了接受的答案之外，我想为你提供答案中遗漏的吸气剂的工作范围。

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

访问命名空间的getter
this.$store.getters['yourModuleName/someGetterMethod']

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

<强>结论
关键是处理命名空间，就像Justin解释的文件系统一样。

编辑：找到一个很好的库来处理vuex商店
除了基本知识，我还想添加这个vuex库，作为vuex商店有效和快速工作的一个很好的补充。 https://github.com/davestewart/vuex-pathify。
它看起来非常有趣并且非常关注您的配置，并且还允许您直接使用vuex处理2waybinding。

Answer 2

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

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

Answer 3

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

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

我认为我不太喜欢这种表示法，但是至少在目前是这样。

Answer 4

尝试这种方法！

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

auth是我的模块名称，getToken是我的获取器。

Answer 5

使用Vuex mapGetters和mapAction，您现在可以轻松完成此操作。但我同意，它在文档中仍然不是很明显。

假设您的商店模块“产品”具有一个名为“ 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>

Answer 6

mapGetters帮助器只是将商店的获取方法映射到本地计算的属性：

sudo find /proc/[0-9]*/fd -ls | grep '(deleted)'

Answer 7

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