辅助函数的种类:mapState,mapGetters,mapMutations,mapActions
首先,在需要使用到这些辅助函数的页面引入他们
import { mapState } from 'vuex';
import { mapGetters } from 'vuex';
import { mapMutations } from 'vuex';
import { mapActions } from 'vuex';
mapState
state: {
data1:1111,
data2:22222,
data3:33333
}
state 相当于vue中的 data ,需要在vue页面中监听 state 的值的变化:
一般写法:
使用mapState 之后:
这样是不是就简便了许多
mapGetters
getters:{
setData1(state){
console.log(state)
return state.data1 * 2
},
setData2(state){
return state.data2 * 2
},
setData3(state){
return state.data3 * 2
},
},
mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性:
computed:{
//第一种
...mapGetters(['setData1','setData2','setData3'])
//第二种
...mapGetters({
setDataCop1:'setData1',
setDataCop2:'setData2',
setDataCop3:'setData3',
})
}
mapMutations
mutations: {
CHANGE_DATA1(state,payload){
state.data1 = payload;
},
CHANGE_DATA2(state,payload){
state.data2 = payload;
},
CHANGE_DATA3(state,payload){
state.data3 = payload;
},
},
使用mapMutations:
methods:{
//第一种
...mapMutations(['CHANGE_DATA1','CHANGE_DATA2','CHANGE_DATA3']),
//第二种
...mapMutations({
'CHANGE_DATA1COPY':'CHANGE_DATA1',
'CHANGE_DATA2COPY':'CHANGE_DATA2',
'CHANGE_DATA3COPY':'CHANGE_DATA3',
})
}
试试效果:
this.CHANGE_DATA1COPY(90909990)
console.log(this.$store.state.data1);//90909990
this.CHANGE_DATA2COPY(90909990)
console.log(this.$store.state.data2);//90909990
mapActions
actions: {
ACT_CHANG1(params,payload){
console.log(params.dispatch)
params.commit('CHANGE_DATA1',payload)
},
},
上面这个参数打印出来是这样的:
调用:
this.$store.dispatch('ACT_CHANG1','0909889');
使用mapActions:
...mapActions({
newAct:'ACT_CHANG1'
}),
调用:
this.newAct('传入参数');
//如果直接发动作,要写好长,如果是多个地方都需要发送这个动作,使用..mapActions 就省事多了,如果只是调用一次,mapActions 的优势就没有了
console.log(this.$store.state.data1);//传入的参数