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

Question

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

__CODE__

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

Answer 1

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

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

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

Dispatch命名空间
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（例如，从store集合中获取特定商品），则需要按以下方式传递它：

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

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

Answer 4

试试这个方法！

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

auth是我的模块名称，getToken是我的吸气剂。

Answer 5

使用 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>