不覺中我們已經(jīng)來到了第四章，教程也走到了一半，上兩節(jié)我們分別介紹了
State（狀態(tài)）,Getters（狀態(tài)過濾）的用法，這里肯定要有朋友問了，那如果我想要修改狀態(tài)里的數(shù)據(jù)怎么辦，不要急，看完本章你一定能找到答案

如何調用

在Vuex中，更改state數(shù)據(jù)的唯一方法是提交mutation。Vuex中的mutation非常類似于事件；每個mutation都有一個字符串的事件類型和一個回調函數(shù)。廢話不多說，看代碼

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態(tài)
      state.count++
    }
  }
})

如果有看上兩節(jié)內容的同學一定會說，那調用是不是這么寫

//this.store.mutations.increment()

恭喜你，答錯了，因為他是一個mutaition handler，所以你不能直接調用，這個更像是事件注冊： “當觸發(fā)一個類型為increment的mutation時，調用此函數(shù)?！?要喚醒一個mutation handler,你需要以相應的type調用 store.commit方法：

this.store.commit('increment')

提交載荷(Payload)

你可以向store.commit傳入額外參數(shù)，即mutation的載荷(payload)

mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.store.commit('increment', 10)

大多數(shù)情況下，載荷最好用對象形式傳入，這樣會更易讀

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
this.store.commit('increment', {
  amount: 10
})

還可以使用對象風格的提交方式

this.store.commit({
  type: 'increment',
  amount: 10
})

減輕負擔的老朋友 mapMutations

使用方法還是老規(guī)矩

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 為 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 為 this.$store.commit('increment')
    })
  }
}

怎么樣，是不是熟悉的配方，熟悉的味道，下一節(jié)，我們要學習Actions的用法，同學們記得提前預習哦~

引用

https://vuex.vuejs.org Vuex官方文檔