Vuex mapMutations和mapActions

一、mapMutations

1、作用：帮助我们生成与mutations对话的方法，即包含 $store.commit()

2、步骤

a、引入

import {mapActions, mapMutations} from 'vuex'

b、语法

methods:{
    // mapMutations生成 addNum subisNum 对象方法
    ...mapMutations({addNum:"ADD", subisNum:"SUB"}),
    
    // mapMutations生成 ADD SUB 数组方法
    // ...mapMutations(["ADD", "SUB"]),
}

c、使用，注意要传参，列表写法，要改变模板方法名称或mutations中方法的名称

<button @click="addNum(n)">+</button>
<button @click="subisNum(n)">-</button>
<!-- <button @click="ADD(n)">+</button> -->
<!-- <button @click="SUB(n)">-</button> -->

二、mapActions

1、作用：帮助我们生成与Actions对话的方式，即$store.dispatch()

2、步骤

a、引入

import {mapActions, mapMutations} from 'vuex'

b、语法

methods:{
    // mapActions生成 addNumOdd addNumWait 对象方法
    ...mapActions({addNumOdd:"addOdd", addNumWait:"addWait"}),

    // mapActions生成 addNumOdd addNumWait 数组方法
    // ...mapActions(["addOdd","addWait"]),
}

c、使用，注意要传参，使用数组方法实，要不改模板的方法名称，要不改action中的方法名称

<button @click="addNumOdd(n)">当前求和为奇数再加</button>
<button @click="addNumWait(n)">等一等再加</button>
<!-- <button @click="addOdd(n)">当前求和为奇数再加</button> -->
<!-- <button @click="addWait(n)">等一等再加</button> -->