mutation是唯一修改state值的入口
mutation是一個(gè)函數(shù)，使用方法類似于自定義事件
可以通過$store.commit方法觸發(fā)
1. 創(chuàng)建
{
mutations: {
mutation名字 (state,payload) {
//修改操作state payload就是commit時(shí)的第二個(gè)參數(shù)
}
}
}
2. 在組件對(duì)應(yīng)的事件函數(shù)里觸發(fā)（提交）
methods: {
函數(shù)名 () {
this.$store.commit('mutation名字',數(shù)據(jù))//數(shù)據(jù)就是mutation函數(shù)中的第二個(gè)參數(shù)
}
}
3. 使用mutation 需要注意的地方
- mutation是同步的
- 將state中的屬性寫完整（操作的屬性必須是state中已經(jīng)存在的）
- 當(dāng)我們?cè)O(shè)置的是對(duì)象時(shí)，我們應(yīng)該使用下列方法
this.$set(對(duì)象,'屬性','屬性值')
vue.set(對(duì)象,'屬性','屬性值'
this.$delete(對(duì)象结笨，'屬性')
vue.delete(對(duì)象要销，'屬性')
或者使用擴(kuò)展運(yùn)算符換成新的對(duì)象
this.obj = { 新的屬性：值, ..this.obj}
4. eg
<div id="app">
<button @click="changeMsgHanlder">按鈕</button>
{{$store.state.msg}}
</div>
<script src="./js/vue.js"></script>
<script src="./js/vuex.js"></script>
<script>
const store = new Vuex.Store({
state: {
msg: '信息',
},
mutations: {
changeMsg (state,msg){
state.msg = msg
}
}
})
const app = new Vue({
el: '#app',
store,
methods: {
changeMsgHanlder () {
this.$store.commit('changeMsg','傳遞過來的消息')
}
}
})
</script>
