详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
程序员文章站
2022-05-08 13:15:25
在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapstate等,这样的就有点...
在开始接触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;
在调用的模块里面的代码如下:
<template> <div class="hello"> <button @click="increment">加{{count}}</button> </div> </template> <script> import {mapstate,mapactions} from 'vuex' export default { name: 'hello', data () { return { msg: 'welcome to your vue.js app' } }, methods:{ increment(){ this.$store.dispatch('incrementsync').then(() => { console.log('then'); }); } }, computed: mapstate({ // mapstate相当于映射 count: 'numb', //这个时候count应该等于多少?!! 是等于store文件里面的count呢还是等于numb?答案是等于numb!这边的意思是mapstate把'numb'的值映射给了count,所以count等于10086 }) } </script>
这个时候按钮应该显示加10还是显示加10086?答案是加10086,所以map其实就是一个在store文件中的映射而已,就是不用让你要调用一个值需要敲这么多代码:this.$state.count;而只需要用count。。。
界面效果:
好了,其他的mapaction,mapmutations的原理是一样样的。
总结
以上所述是小编给大家介绍的详解vuex中mapstate,mapgetters,mapmutations,mapactions的作用,希望对大家有所帮助
上一篇: Vue2.0 实现单选互斥的方法