2021.11.24（getters使用、四个map方法使用）

getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
2. 在store.js中追加getters配置

   ......
   const getters = {
       bigSum(state){
           return state.sum * 10
       }
   }
   
   //创建并暴露store
   export default new Vuex.Store({
       ......
       getters
   })
   

3. 组件中读取数据$store.getters.bigSum

四个map方法的使用(import {mapState,mapGetters,mapMutations,mapActions} from 'vuex')

1. mapState方法：用于帮助我们映射state中的数据为计算属性

   computed: {
       //借助mapState生成计算属性，sum、school、subject（对象写法）
       ...mapState({sum:'sum',school:'school',subject:'subject'}),//当对象中key值与value值不同时推荐使用，即mySum='sum'这样的
   
       //借助mapState生成计算属性，sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),//当对象中key值与value值相同时推荐使用
   }
   

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed: {
       //借助mapGetters生成计算属性，bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),//当对象中key值与value值不同时推荐使用，即mybigSum='bigSum'这样的
   
       //借助mapGetters生成计算属性，bigSum（数组写法）
       ...mapGetters(['bigSum']),//当对象中key值与value值相同时推荐使用
   }
   

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   methods: {
       //靠mapActions生成，incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd'，incrementWait:'jiaWait'}),
   
       //靠mapActions生成，incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait']),
   }
   

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods: {
       //靠mapMutations生成，incrementOdd、incrementWait（对象形式）
       ...mapMutations({increment:'JIA'，decrement:'JIAN'}),
   
       //靠mapMutations生成，JIA、JIAN（数组形式）
       ...mapMutations(['JIA','JIAN']),
   }
   

备注：mapActions和mapMutations使用时，若需要传递参数，需要在模板中绑定事件时传递好参数，否则参数是事件对象。