Vuex_mapState_mapGetters_mapActions_mapMutations_简易求和案例—对Count组件进行修改

1.mapState

映射state中的数据为计算属性

1）对象写法

...mapState({sum:'sum',school:'school',subject:'subject'}),

2）数组写法

...mapState(['sum','school','subject'])

2.mapGetters

映射getters中的数据为计算属性

1）对象写法

...mapGetters({bigSum:'bigSum'})

2）数组写法

...mapGetters(['bigSum'])

3.mapActions

生成与actions对话的方法，即包含$store.dispatch(xxx)的函数

1）对象写法

...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

2）数组写法

...mapActions(['jiaOdd','jiaWait']) //点击事件需改为jiaOdd jiaWait

4.mapMutations

生成与mutations对话的方法，即包含$store.commit(xxx)的函数

1）对象写法

...mapMutations({increment:'JIA',decrement:'JIAN'})

2）数组写法

...mapMutations(['JIA','JIAN']), //此时点击事件需改为JIA JIAN

在使用mapActions和mapMutations需要传递参数，需要在模板中绑定事件时传递，否则参数默认为事件对象

求和案例（Count组件）

对Count组件的修改如下

<template>
  <div>
      <h1>当前求和为：{{sum}}</h1>
      <h3>当前求和放大十倍为：{{bigSum}}</h3>
      <h3>我在{{school}}，学习{{subject}}</h3>
      <select v-model="n">
          <option :value="1">1</option>
          <option :value="2">2</option>
          <option :value="3">3</option>
          <!-- 加了冒号后对引号内容进行js表达式解析 不加后作为字符串 -->
      </select>
      <button @click="increment(n)">+</button>
      <button @click="decrement(n)">-</button>
      <button @click="incrementOdd(n)">当前求和为奇数再加</button>
      <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
export default {
    name:'Count',
    data() {
        return {
            n:1,        //用户选择的数
        }
    },
    methods: {
        /*原写法 复杂
        increment(){
            this.$store.commit('JIA',this.n)
        },
        decrement(){
            this.$store.commit('JIAN',this.n)
        },*/
        
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
		...mapMutations({increment:'JIA',decrement:'JIAN'})
        
        //上述生成的代码
        /*increment(value){
            this.$store.commit('JIA',value)
        }*/
        //即需在点击事件内传入参数n，否则默认传入event
        
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）
        ...mapMutations(['JIA','JIAN']), //此时点击事件需改为JIA JIAN
        
        /*原写法 复杂
        incrementOdd(){
            this.$store.dispatch('jiaOdd',this.n)
        },
        incrementWait(){
            this.$store.dispatch('jiaWait',this.n)
        }*/
        
        //借助mapActions生成对应的方法，方法会调用dispatch去联系actions（对象写法）
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
        //借助mapActions生成对应的方法，方法会调用dispatch去联系actions（数组写法）
        ...mapActions(['jiaOdd','jiaWait']) //点击事件需改为jiaOdd jiaWait
    },
    computed:{
        /*原写法 复杂
        sum(){
            return this.$store.state.sum
        },
        school(){
            return this.$store.state.school
        },
        subject(){
            return this.$store.state.subject
        },*/
        
        //借助mapState生成计算属性，从state中读取数据（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
        //借助mapState生成计算属性，从state中读取数据（数组写法），生成的计算属性和读取的名一样
        ...mapState(['sum','school','subject'])
        //借助mapGetters生成计算属性，从getters中读取数据（对象写法）
        ...mapGetters({bigSum:'bigSum'})
        //借助mapGetters生成计算属性，从getters中读取数据（数组写法）
		...mapGetters(['bigSum'])
    }
}
</script>