详解详解vuex中中mapState,mapGetters,mapMutations,mapActions的作用的作用 主要介绍了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以参考下 在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的，然后突然出来一种加了一个前缀的mapState等，这样的就有点蒙圈了。。 。特别是官方的文档并没有给除详细的说明跟例子。。。然后就自己慢慢理解了一下。其实也就是一个重命名而已。。。以下就是例子，希望能帮助理解： 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 10, numb: 10086 }, getters: { add: (state, getter) => { state.count = getter.add; return state.count; }, }, mutations: { increment(state,){ state.count += 2; }, }, actions: { actionA({ dispatch, commit }) { return commit('add'); }, } }); export default store; 在调用的模块里面的代码如下： 这个时候按钮应该显示加10还是显示加10086？答案是加10086，所以map其实就是一个在store文件中的映射而已，就是不用让你要调用一个值需要敲这么多代 码：this.$state.count;而只需要用count。。。 界面效果： 好了，其他的mapAction，mapMutations的原理是一样样的。 总结总结 以上所述是小编给大家介绍的详解vuex中mapState,mapGetters,mapMutations,mapActions的作用，希望对大家有所帮助，如果大家有任何疑问请给我留言， 小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！