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

如何調(diào)用

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

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

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

//this.store.mutations.increment()

恭喜你，答錯了，因為他是一個mutaition handler，所以你不能直接調(diào)用，這個更像是事件注冊： “當(dāng)觸發(fā)一個類型為increment的mutation時，調(diào)用此函數(shù)?！?要喚醒一個mutation handler,你需要以相應(yīng)的type調(diào)用 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
})

還可以使用對象風(fēng)格的提交方式

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

減輕負(fù)擔(dān)的老朋友 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é)，我們要學(xué)習(xí)Actions的用法，同學(xué)們記得提前預(yù)習(xí)哦~

引用

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