Vuex中的辅助函数

mapState

如果在一个组件中需要获取多个状态，通过this.$store.state来声明就会显得有些重复跟冗余，通过mapState这个辅助函数可以帮助生成计算属性。

在store文件中定义state

//  store.js
state:{
	number1:1,
	number2:2
}

在组件中使用mapState，放置在computed里面。

// App.vue
<template>
  <div>
    <h1>{{number1}}</h1>
    <h1>{{number2}}</h1>
  </div>
</template>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default{
	computed:{
		...mapState(['number1','number2']) // 在组件通过this就可调用，不用再写this.$store.state
		// ...mapState({ 另一种写法
    	//   number1: state=>state.number1,
    	//   number2: state=>state.number2
    	// }),
	}
}

mapGetters

在store文件中定义getters

//  store.js
  getters:{
    total(state){
      return state.number1+state.number2
    }
  },

在组件中使用mapGetters，放置在computed里面。

computed:{
  ...mapGetters(['total']),
}

mapMutations

mapMutations 其实跟mapState、mapGetters 的作用是类似的，将组件中的 methods 映射为store.commit 调用。

在store文件中定义mutations

//  store.js
  mutations:{
    changeNumber1(state, val){
      state.number1 += val
    },
    changeNumber2(state, val){
      state.number2 += val
    },
  },

每一个mutation接受两个参数，一个是state，一个是传入值；

在组件中使用mapMutations，放置在methods里面。

// App.vue
<template>
  <div>
    <h1>{{number1}}</h1>
    <h2 @click="changeNumber1(number1)">+{{number1}}</h2>
    <h1>{{number2}}</h1>
    <h2 @click="changeNumber2(number2)">+{{number2}}</h2>
  </div>
</template>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default{
  computed:{
		...mapState(['number1','number2']) // 在组件通过this就可调用，不用再写this.$store.state
		// ...mapState({ 另一种写法
    	//   number1: state=>state.number1,
    	//   number2: state=>state.number2
    	// }),
  }
  methods:{
    ...mapMutations(['changeNumber1','changeNumber2']),
    // 定义别名方式
    // ...mapMutations({
    //   changeNumber1Alias: 'changeNumber1',
    //   changeNumber2Alias: 'changeNumber2'
    // }),
  }
}

mapActions

mapActions将组件中的 methods 映射为store.dispatch 调用。

在store文件中定义actions

//  store.js
  mutations:{
    changeNumber1(state, val){
      state.number1 += val
    },
    changeNumber2(state, val){
      state.number2 += val
    },
  },
  actions:{
	changeNumber1Action(context,val){
	  context.commit('changeNumber1',val);
	},
	changeNumber2Action(context,val){
	  context.commit('changeNumber2',val);
	}
  }

每一个action接受两个参数，一个是context（上下文），一个是传入值；

在组件中使用mapActions，放置在methods里面。

// App.vue
<template>
  <div>
    <h1>{{number1}}</h1>
    <h2 @click="changeNumber1Action(number1)">+{{number1}}</h2>
    <h1>{{number2}}</h1>
    <h2 @click="changeNumber2Action(number2)">+{{number2}}</h2>
  </div>
</template>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default{
  computed:{
		...mapState(['number1','number2']) // 在组件通过this就可调用，不用再写this.$store.state
		// ...mapState({ 另一种写法
    	//   number1: state=>state.number1,
    	//   number2: state=>state.number2
    	// }),
  }
  methods:{
    ...mapActions(['changeNumber1Action','changeNumber2Action']),
    // 定义别名方式
    // ...mapActions({
    //   changeNumber1ActionAlias: 'changeNumber1Action',
    //   changeNumber2ActionAlias: 'changeNumber2Action'
    // }),
  }
}