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

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

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

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

84687 次浏览
小开
最佳答案

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

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

小开

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

调试商店
在任何情况下，您都可以调用 console.log(this.$store)来调试存储。
如果这样做，您将看到 getter 的名称中带有名称空间的前缀。 enter image description here

访问带名称空间的 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。

* * 剪辑: 感谢其他的答案。增加了调度方法与参数的整体性。

小开

作为已接受答案的另一个补充，如果需要向 getter 传递参数(例如从存储集合中获取特定项) ，则需要按以下方式传递参数:

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

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

小开

使用 Vuex mapGetters 和 mapActions，您现在可以非常轻松地完成这项工作。但是我同意，文件里还是没有明确说明。

假设您的存储模块“ products”有一个名为“ most Popular”的 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>
小开

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

试试这个方法！

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

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

小开

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

小开

除了已被接受的答案之外，我觉得直接在组件中突变状态和提交突变不是一个好主意。我遵循的经验法则是，始终使用一个操作来提交突变，并且状态只在突变内部发生突变。 使用 getter 获得转换后的状态。

Getter 可以映射到使用 mapGetters计算的方法，操作可以映射到使用 mapActions的方法，如下例所示

// component.vue
// namespace_name=products


<template>
<div>
<p> This is awesome product \{\{getRecentProduct}} </p>
</div>
<button @click="onButtonClick()"> Clear recent</button>
</template>
<script>
import { mapGetters, mapActions } from "vuex";


export default {
computed: {
...mapGetters({
getRecentProduct: "products/getRecentProduct",
}),
anotherComputed(){
return "anotherOne"
}
},
methods: {
...mapActions({
clearRecentProduct: "products/clearRecentProduct",
}),
onButtonClick(){
this.clearRecentProduct(); /// Dispatch the action
},
anotherMethods(){
console.log(this.getRecentProduct); // Access computed props
}
}
};
</script>
小开

下面介绍如何使用组合 API (设置)访问 vuex Getters和 Mutations

<script setup>
import { useStore } from 'vuex'


const store = useStore();


var value = store.getters['subModuleName/getterMethod'];


store.commit['subModuleName/MutationMethod'];


</script>

提交答案