Vuex中mapState、mapGetters、mapActions、mapMutations的使用

mapState

1. mapstate方法：用于映射Vuex中state的数据为计算属性
2. 可以避免在html中频繁通过{{$store.state.属性}}使用state中的数据
3. 使用方法，有两种写法：
   1. 对象写法
   2. 数组写法

      import {mapState} from 'vuex'
      <template>
          <div>
          	<!-- 使用计算属性 -->
          	<span>{{num}}</span>
      		<span>{{sum}}</span>
          </div>
      </template>
      
      // 实例化组件中的计算属性
      computed: {
          // 对象写法：借助mapState生成计算属性num、sum
          ...mapState({ num: 'num', sum: 'sum' })
          // 数组写法：借助mapState生成计算属性num
          ...mapState(['num', 'sum'])
      }
      

4. …mapState({ num: ‘num’, sum: ‘sum’ })中num: 'num’实际上为：

   computed: {
   	num() {
   		return this.$store.state.num
   	}
   }
   

mapGetters

1. mapGetters方法：用于映射Vuex中getters的数据为计算属性
2. 可以避免在html中频繁通过{{$store.getters.属性}}使用state中的数据
3. 使用方法，有两种写法：
   1. 对象写法
   2. 数组写法

      import {mapGetters} from 'vuex'
      <template>
          <div>
          	<!-- 使用计算属性 -->
          	<span>{{bigNum}}</span>
          </div>
      </template>
      
      // 实例化组件中的计算属性
      computed: {
          // 对象写法：借助mapGetters生成计算属性bigNum
          ...mapGetters({ bigNum: 'bigNum' })
          // 数组写法：借助mapState生成计算属性bigNum
          ...mapGetters(['bigNum'])
      }
      

4. …mapGetters({ bigNum: ‘bigNum’ })中的bigNum: 'bigNum’实际上为：

   computed: {
   	bigNum() {
   		return this.$store.getters.bigNum
   	}
   }
   

mapActions

1. mapActions方法：用于生成与Vuex中actions对话的方法，即：this.$store.dispatch(“方法名”)

   import {mapActions} from 'vuex'
   <template>
       <div>
       	<!-- 调用incrementOdd，并传参为num -->
       	<span @click="incrementOdd(num)"></span>
       	<!-- 调用decrementWait，并传参为num -->
       	<span @click="decrementWait(num)"></span>
       </div>
   </template>
   
   data () {
       return {
           num: 0
       }
   }
   // 实例化组件中的methods
   methods: {
       // 对象写法：生成incrementOdd、decrementWait分别用于与actions中jiaOdd、jianWait方法对话
       // 即为this.$store.dispatch('jiaOdd', num)、this.$store.dispatch('jianWait', num)的简写形式
       ...mapActions({ incrementOdd: 'jiaOdd', decrementWait: 'jianWait' })
   }
   

2. …mapActions({ incrementOdd: ‘jiaOdd’, decrementWait: ‘jianWait’ })中的increment: 'jiaOdd’实际上为：

   methods: {
       incrementOdd(num) {
       	return this.$store.dispatch('jiaOdd', num)
   	}
   }
   

mapMutations

1. mapMutations方法：用于生成与Vuex中mutations对话的方法，即：this.$store.commit(“方法名”)

   import {mapMutations} from 'vuex'
   <template>
       <div>
       	<!-- 调用increment，并传参为num -->
       	<span @click="increment(num)"></span>
       	<!-- 调用decrement，并传参为num -->
       	<span @click="decrement(num)"></span>
       </div>
   </template>
   
   data () {
       return {
           num: 0
       }
   }
   // 实例化组件中的methods
   methods: {
       // 对象写法：生成increment、decrement分别用于与mutations中JIA、JIAN方法对话
       // 即为this.$store.commit('JIA', num)、this.$store.commit('JIAN', num)的简写形式
       ...mapMutations({ increment: 'JIA', decrement: 'JIAN' })
   }
   

2. …mapMutations({ increment: ‘JIA’, decrement: ‘JIAN’ })中的increment: 'JIA’实际上为：

   methods: {
       increment(num) {
       	return this.$store.commit('JIA', num)
   	}
   }