一、mapState

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

//  store.js存放数据
state:{
    number1:1,
    number2:2
}

如何使用

//方式一（不推荐）
<template>
    {{$store.state.number1}}
    {{$store.state.number2}}
</template>
//方式二(计算属性)
<template>
    {{number1}}{{number2}}
</template>
computed:{
    number1(){
      return this.$store.state.number1
    },
    number2(){
      return this.$store.state.number2
    }
}
//方式三（辅助函数）
//在组件中使用mapState，放置在computed里面。
//项目中常用的方式
// App.vue
<template>
  <div>
    <h1>{{number1}}</h1>
    <h1>{{number2}}</h1>
  </div>
</template>
import { mapState } from 'vuex'
export default{
    computed:{
        ...mapState(['number1','number2']) // 在组件通过this就可调用，不用再写this.$store.state
        // ...mapState({ 另一种写法
        //   number1: state=>state.number1,
        //   number2: state=>state.number2
        // }),
    }
}

二、mapGetters

//方式一（不推荐）
<template>
    {{$store.getters.GET_BOOK_NUM}}
</template>
//方式二(计算属性)
<template>
    {{GET_BOOK_NUM}}
</template>
computed:{
    GET_BOOK_NUM(){
      return this.$store.getters.GET_BOOK_NUM
    }
}
//方式三（辅助函数）
//项目中常用的方式
<template>
    {{GET_BOOK_NUM}}
</template>
import {mapGetters} from 'vuex'
computed:{  
      ...mapGetters(['GET_BOOK_NUM'])  
}

三、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}}</h2>
    <h1>{{number2}}</h1>
    <h2 @click="changeNumber2">+{{number2}}</h2>
  </div>
</template>
import { mapMutations } from 'vuex'
export default{
  computed:{
        ...mapState(['number1','number2']) 
  }
  methods:{
    ...mapMutations(['changeNumber1','changeNumber2']),
  }
  //映射 this.changeNumber1() 为 this.$store.commit('changeNumber1')
  //映射 this.changeNumber2() 为 this.$store.commit('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}}</h2>
    <h1>{{number2}}</h1>
    <h2 @click="changeNumber2Action">+{{number2}}</h2>
  </div>
</template>
import { mapActions} from 'vuex'
export default{
  methods: {
    ...mapActions([
      'changeNumber1Action','changeNumber2Action'
    ]),
     //映射 this.changeNumber1Action() 为 this.$store.dispatch('changeNumber1Action')
     //映射 this.changeNumber2Action() 为 this.$store.dispatch('changeNumber2Action')
  }