Vuex的辅助函数专场

辅助函数的种类：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);//传入的参数