详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

前端之家收集整理的这篇文章主要介绍了详解vuex中mapState,mapGetters,mapMutations,mapActions的作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了。。。特别是官方的文档并没有给除详细的说明跟例子。。。然后就自己慢慢理解了一下。其实也就是一个重命名而已。。。以下就是例子,希望能帮助理解:

在store中代码

{ 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的作用。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/32779.html

猜你在找的Vue相关文章