详解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;

在调用的模块里面的代码如下：

加{{count}}

这个时候按钮应该显示加10还是显示加10086？答案是加10086，所以map其实就是一个在store文件中的映射而已，就是不用让你要调用一个值需要敲这么多代码：this.$state.count;而只需要用count。。。

界面效果：

好了，其他的mapAction，mapMutations的原理是一样样的。

总结

以上所述是给大家介绍的详解vuex中mapState,mapGetters,mapMutationhttp://s,mapActions的作用，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。