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'
})
8条答案
按热度按时间piok6c0g1#
除了可接受的答案之外,我还想为答案中缺少的getter提供一个变通方法。
调试存储区
在任何情况下,您都可以调用
console.log(this.$store)
来调试应用商店。如果这样做,您将看到getter在其名称中以名称空间为前缀。
访问命名空间getter
分派命名空间
使用参数分配名称空间
结论
关键是像Justin解释的那样,像文件系统一样处理命名空间。
编辑:找到了一个用于处理vuex Store的不错的库
除了基本知识之外,我还想添加这个vuex库,作为一个很好的补充,以便有效和快速地使用vuex存储。https://github.com/davestewart/vuex-pathify。
它看起来非常有趣,并且非常关心您的配置,还允许您直接使用VUEX处理2waybinding。
**编辑:感谢其他的答案。添加了调度方法与参数的完整性。
5sxhfpxr2#
在你的例子中,它是
store.dispatch('products/clearWorkingData')
,你可以把actions/mutation看作一个文件系统,模块嵌套得越深,它们在树中的位置就越深。所以如果你有一个三层深的树,你可以去
store.commit('first/second/third/method')
。xiozqbni3#
作为可接受答案的另一个补充,如果需要将参数传递给getter(例如,从存储集合中获取特定项),则需要按如下方式传递:
我不认为我非常喜欢这个符号,但它就是它--至少目前是这样。
6pp0gazn4#
试试这个方法!
auth
是我的模块名,getToken
是我的getter。brc7rcf05#
使用Vuex mapGetter和mapActions,你现在可以很容易地做到这一点。
假设您的商店模块'products'有一个名为'mostPopular'的getter和一个名为'clearWorkingData'的操作:
jfgube3f6#
mapGetters helper只是将存储getterMap到本地计算属性:
uurv41yg7#
在配置特定存储对象时,必须注意使用
namespaced: true
9jyewag08#
除了公认的答案之外,我觉得改变状态并直接在组件中提交改变不是一个好主意。我遵循的经验法则是,总是使用一个操作来提交改变,而状态只在改变内改变。使用getter来获得转换后的状态。
可以使用
mapGetters
将getterMap到computed,使用mapActions
将actionMap到方法,如下例所示