vuex之mutation示例说明

mutation中文意思是改变、变异
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Vuex 中的 mutation 非常类似于事件：
”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

<div id="app">
    {{count}}
    <button @click="add">+ 1</button>
</div>

const store=new Vuex.Store({
    state:{//所有的状态，单例模式处理
        count:10.123,
    },
    getters:{//是相当于store的计算属性
        /*aa:(state)=>{
            return state.count.toFixed(2);
        }*/
        aa(){
            return store.state.count.toFixed(2);
        }
    },
    mutations:{//相当于事件
        increment(state,data){
            state.count+=data.addData;
        }
    }
})

const vm=new Vue({
    el:'#app',
    store,//将store挂载到vue实例上
    computed:{
        count(){
            return this.$store.getters.aa;//通过computed的计算属性获取store中getters中对应的值
        }
    },
    methods:{
        add(){
            console.log(this.$store.state.count)
            //this.$store.commit("increment",Math.random());//处理store的mutation中对应的事件，可以改变state状态，可以传入参数
            //对象风格提交
            this.$store.commit({
                type:"increment",
                "addData":Math.random()
            });
        }
    },
    components:{},
})
//在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：
    /*mutations: {
        increment (state, payload) {
            state.count += payload.amount
        }
    }*/

    /*store.commit('increment', {
        amount: 10
    })*/

//对象风格的提交方式

    /*mutations: {
        increment (state, payload) {
            state.count += payload.amount
        }
    }  */

    /*store.commit({//与上边的例子只是写法不同
        type:'increment',
        amount: 10
    })*/

//Mutation 需遵守 Vue 的响应规则
//Mutation 必须是同步函数(因为 任何在回调函数中进行的状态的改变都是不可追踪的)


//mapMutations映射使用
methods:{
  ...mapMutations(['Mutation1','Mutation2']),
  otherMethods(){
    //xxx
  }
}