Vue学习笔记-Vuex四个map方法的使用

在组件中导入方法

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

mapState方法的使用

注意：这里的…是ES6语法，表示将该的对象所有属性展开，放入其所在上级对象中

......
computed:{//借助mapState生成计算属性，从Vuex中的state对象中读取数据（对象写法）...mapState({sum:'sum',school:'school',subject:'subject'})//借助mapState生成计算属性，从Vuex中的state对象中读取数据（数组写法）...mapState(['sum','school','subject']),
}

配置完毕之后，当组件访问state中的数据，可以由原来的$store.state.sum等价为sum，其他数据以此类推

mapGetters方法的使用

......
computed:{//借助mapGetters生成计算属性，从Vuex中的getters对象中读取数据（对象写法）...mapGetters({bigSum:'bigSum',}),//借助mapGetters生成计算属性，从Vuex中的getters对象中读取数据（数组写法）...mapGetters(['bigSum']),
}

配置完毕后，当组件访问getters中的数据，可以由$store.getters.bigSum替换为bigSum

mapActions方法的使用

帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)的函数
注意：需要传递参数时，需要在组件进行方法调用时传参，例如按钮点击事件:
<button @click="incrementOdd(value)"></button>

methods:{//用于取代 $store.dispatch('incrementOdd'),对象写法...mapActions({incrementOdd : 'incrementOdd',incrementWait : 'incrementWait'}),//数组写法...mapActions(['incrementOdd','incrementWait'])
}

mapMutations方法的使用

帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数
注意：需要传递参数时，需要在组件进行方法调用时传参，例如按钮点击事件:
<button @click="increment(value)"></button>

methods:{...mapMutations({increment:'ADD',decrement:'DECREMENT'})
}