一、Mutation的作用

更改 Vuex 的store 中的狀態(tài)的唯一方法是提交 mutation。 Vuex 中的 mutation 非常類似于事件：

• 每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。
• 這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的函數(shù)，并且它會接受 state 作為第一個參數(shù)：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
  	// 第一個參數(shù)為 state
    add(state) {
      // 變更狀態(tài)，即變更值
      state.count++
    }
  }
})

• 你不能直接調(diào)用一個 mutation handler。

這個選項更像是事件注冊：

“當觸發(fā)一個類型為 add 的 mutation 時，調(diào)用此函數(shù)。”要喚醒一個 mutation handler，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：

store.commit('increment')

二、提交載荷（Payload）

即當我們想修改狀態(tài)值，想傳入的值進而進行修改時，你可以向 store.commit 傳入額外的參數(shù)，即 mutation 的 載荷（payload）：

// 定義
mutations: {
  // n被稱為載荷， 即為我們傳入的值
  add(state, n) {
    state.count += n
  }
}

// 調(diào)用
store.commit('increment', 10)

在大多數(shù)情況下，載荷應(yīng)該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀：

// 定義
mutations: {
  add(state, payload) {
    state.count += payload.amount
  }
}

// 調(diào)用
store.commit('increment', {
  amount: 10
})

三、對象風(fēng)格的提交方式

提交 mutation 的另一種方式是直接使用包含 type 屬性的對象：

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

當使用對象風(fēng)格的提交方式，整個對象都作為載荷傳給 mutation 函數(shù)，因此 handler 保持不變：

mutations: {
  add(state, payload) {
    state.count += payload.amount
  }
}

四、Mutation 需遵守 Vue 的響應(yīng)規(guī)則

最好提前在你的 store 中初始化好所有所需屬性。

若需要在對象上添加新屬性時，你應(yīng)該：

1. 使用 Vue.set(obj, 'newProp', 123)
2. 以新對象替換老對象。例如，利用對象展開運算符我們可以這樣寫：

state.obj = { ...state.obj, newProp: 123 }

五、Mutation 必須是同步函數(shù) ?。?！

一條重要的原則就是要記住 mutation 必須是同步函數(shù)。為什么？請參考下面的例子：

mutations: {
  someMutation (state) {
     // 一秒后count++
    setTimeout(() => {
      state.count++
    }, 1000)
  }
}

現(xiàn)在想象，我們正在 debug 一個 app 并且觀察 devtool 中的 mutation 日志。每一條mutation 被記錄，devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成：因為當 mutation 觸發(fā)的時候，回調(diào)函數(shù)還沒有被調(diào)用，devtools 不知道什么時候回調(diào)函數(shù)實際上被調(diào)用——實質(zhì)上任何在回調(diào)函數(shù)中進行的狀態(tài)的改變都是不可追蹤的。 即雖然1秒后我們可以實現(xiàn) state.count++ ，但是 devtools 是無法監(jiān)測state.count 的改變的。 假設(shè)調(diào)用通過 someMutation count 的值為0， 打開 devtools工具，然后我們調(diào)用 someMutation ,觀察 devtools 的記錄，我肯可以看到 devtools 監(jiān)聽到的 count 的值還是為0， 因為時異步函數(shù)，所以 someMutation 的 state.count++ 操作還沒有執(zhí)行。 大家可以嘗試在自己的瀏覽器使用 devtools 工具試試看。

六、在組件中提交 Mutation

你可以在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點注入 store）。

// main.js
// 根節(jié)點引入store
new Vue({
  el: '#app',
  store
})

// 組件
// 引入輔助函數(shù) mapMutations 
import { mapMutations } from 'vuex'
export default {
  methods: {
    // 將 `this.add()` 映射為 `this.$store.commit('add')`
    // `mapMutations` 也支持載荷：
    // 將 `this.addBy(amount)` 映射為 this.$store.commit('addBy', amount)`
    ...mapMutations(['add', 'addBy']),
    // 將 `this.increment()` 映射為 `this.$store.commit('add')`
    ...mapMutations({
      increment: 'add' 
    })
  }
}

到此這篇關(guān)于Vuex中的Mutation使用詳解的文章就介紹到這了,更多相關(guān)Vuex中的Mutation內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論