vuex简单梳理3,Mutations的用法和其辅助函数

Mutations在vuex中的定位是修改store中state的唯一方法

虽然在之前梳理state时，曾直接修改过state是可以修改的，但在真正使用的时候想要修改state还是要通过Muatations,

而且在Mutations中不应该包含任何异步的请求，异步的请求会在下一个梳理actions中提到。

const state = {
    liuDeHua:12,
   
}

const mutations = {
    // 修改state下的liudehua
　　默认第一个参数接受state，后面只能在传入一个参数
　　//这里把函数用大写字母命名是为了与actions中的函数进行区分
    SET_LIU_DE_HUA(state,num=1,num2){
        console.log(num,num2,'只能接受一个参数，num2为undefined');// undefined
        console.log(this.state === state);//true
        state.liuDeHua +=num;
    },
   
}

在组件中通过，$store.commit()调用Mutations中的方法

 <div>
            
            <input type="button" @click="$store.commit('SET_LIU_DE_HUA',2,3)">

　　　　　　　　<input type="button" @click="set_liu(5)">

            {{$store.state.liuDeHua}}
        </div>

    methods:{
 
                set_liu(num){
                    this.$store.commit("SET_LIU_DE_HUA",num)
                            
        }

 

辅助函数的用法于之前类似

 import {mapMutations} from "vuex";

methods:{
            ...mapMutations({
                add:'SET_LIU_DE_HUA',
                
            }),
            ...{
                set_liu(num){//属于组件自己的方法也可以放子啊这里，但是没有区分，推荐第一种写法
                    this.$store.commit("SET_LIU_DE_HUA",num)
                }
            }
            
        }

组件中

 <input type="button" @click="$store.commit('SET_LIU_DE_HUA',2,3)">
            <input type="button" @click="add(4)">
            <input type="button" @click="set_liu(5)">

大体内容就是这些