Vue 求和案例优化 2.0（Day46）

方法生成

与mutations对话方法生成

1. 程序员独立写方法

   Count组件

           // 加法
           increment() {
               this.$store.commit('ADD', this.number)
           },
           // 减法
           decrement() {
               this.$store.commit('MINUS', this.number)
           },
           <button @click="increment">+</button>
           <button @click="decrement">-</button>        
   

2. 借助mapMutations生成方法（数组写法）

   • 当前组件中的方法名与mutations中的方法名同名时可使用该方法

     Count组件

     ...mapMutations(['ADD','MINUS']),   
             <button @click="ADD(number)">+</button>
             <button @click="MINUS(number)">-</button>
     

3. 借助mapMutations生成方法（对象写法）

   Count组件

   ...mapMutations({increment:'ADD',decrement:'MINUS'}),       
           <button @click="increment(number)">+</button>
           <button @click="decrement(number)">-</button>
   

与actions对话方法生成

1. 程序员独立编写

   Count组件

           // 合为奇数加
           incrementOdd() {
               this.$store.dispatch('addOdd', this.number)
           },
           // 等一等再加
           incrementWait() {
               this.$store.dispatch('addWait', this.number)
           },
           <button @click="incrementOdd">当前求和为奇数再加</button>
           <button @click="incrementWait">等一等再加</button>
   

2. 借助mapActions方法生成（对象方法）

   Count组件

   ...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
           <button @click="incrementOdd(number)">当前求和为奇数再加</button>
           <button @click="incrementWait(number)">等一等再加</button>
   

3. 借助mapActions方法生成（数组方法，使用条件与mapMutations相同）

   Count组件

   ...mapActions(['addOdd','addWait'])
           <button @click="addOdd(number)">当前求和为奇数再加</button>
           <button @click="addWait(number)">等一等再加</button>
   

注： mapActions 和mapMutations 使用时，如需传递参数，在模板中绑定事件时传递参数，否则传递的参数是事件对象