1.mapState
2.mapGetters
3.
4.
当你的操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成。
其他使用commit即可。
举个例子:
const store = new Vuex.Store({ state: { count: 10, numb: 10086 }, getters: { add: (state) => { return state.count; }, }, mutations: { increment(state,val) { if(val){ state.count += val; }else{ state.count += 2; } }, }, actions: { actionA({dispatch, commit}) { return commit('add'); }, increment({commit}) { return commit('increment') } } }); /* eslint-disable no-new */ new Vue({ router, store, render: h => h(App) }).$mount('#app-box')
使用:
import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'
methods:{ ...mapMutations({addNumber:'increment'}), increment(){ this.$store.dispatch('increment'); } }, computed: { ...mapState({count:'numb'}), ...mapGetters(['add']) },
<div class="hello"> <button @click="increment">加+2{{count}}</button> </div> <div class="hello"> <button @click="addNumber(5)">加+5{{count}}</button> </div> <div class="hello"> <button >{{add}}</button> </div>
点击+2:store的count+=2
点击+5:store的count+=5
...mapState({count:'numb'}),
意思是this.count=this.$store.state.numb
...mapMutations({addNumber:'increment'}),
意思是之行this的addNumber函数的时候,执行this.$store的mutations的increment的函数