如何使用Vuex中的Mutations

這篇文章主要講解了如何使用Vuex中的Mutations，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

在 Vuex 中 store 數據改變的唯一方法就是提交 mutations。mutations里面裝著一些改變數據方法的集合，這是Vuex 設計很重要的一點，就是把處理數據邏輯方法全部放在 mutations 里面，使得數據和視圖分離。

Mutations使用

Vuex 中的 mutations 非常類似于事件，每個 mutations 都有一個字符串的事件類型(type)和一個回調函數(handler)，也可以理解為{type:handler()}，這和訂閱發布有點類似。先注冊事件，當觸發響應類型的時候調用handker()，調用type的時候需要用到store.commit方法。

示例：

這個回調函數會接受state 作為第一個參數：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
     // 事件類型 type 為 increment
    increment (state) { 
      // 變更狀態
      state.count++
    }
  }
})

我們不能直接使用store.mutations.increment() 來調用，Vuex 規定必須使用 store.commit 來觸發對應 type 的方法：

store.commit('increment')

提交載荷（Payload）

載荷簡單的理解就是往 handler(state) 中傳參 handler(state, pryload) 。

示例：

大多數情況下，載荷是一個對象：

mutations: {
 // 提交荷載
 increment (state, payload) {
  state.count += payload.amount
 }
}

提交荷載有兩種方式：

// 把載荷和type分開提交
store.commit('increment', {
 amount: 10
})

// 整個對象都作為載荷傳給mutation函數
store.commit({
 type: 'increment',
 amount: 10
})

我們可以根據自己的喜好來選擇使用哪種提交方式。

commit

我們可以在組件中使用 this.$store.commit('xxx') 提交 mutations。

示例：
或者可以使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用（需要在根節點注入 store）。

示例：

在使用mapMutations 輔助函數之前同樣需要先引入：

<script>
import { mapMutations } from 'vuex'
export default {
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  methods:{
    ...mapMutations([
      'increment',
      'decrement'
    ])
  }
}
</script>

Mutations 需遵守 Vue 的響應規則

Vuex 的 store 中的狀態是響應式的，所以當我們變更狀態時，監視狀態的 Vue 組件也會自動更新。

這也意味著 Vuex 中的 mutations 也需要與使用 Vue 一樣遵守一些注意事項，如下所示：

• 最好提前在 store 中初始化好所有所需屬性。
• 當需要在對象上添加新屬性時，應該使用 Vue.set(obj, 'newProp', 123)，或者以新對象替換老對象。例如利用對象展開運算符可以寫成：state.obj = {...state.obj, newProp: 123 }。

使用常量替代 Mutations 事件類型

使用常量替代 mutations 事件類型在各種 Flux 實現中是很常見的模式。這樣可以使 linter 之類的工具發揮作用，同時把這些常量放在單獨的文件中可以讓你的代碼合作者對整個 app 包含的 mutations 一目了然：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

store.js 文件內容如下所示：

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
 state: { ... },
 mutations: {
  // 使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函數名
  [SOME_MUTATION] (state) {
   // mutate state
  }
 }
})

我們知道mutation 是通過store.commit('increment')的方式調用的，其中increment方法是以字符串的形式代入。如果項目小，一個人開發的話倒還好，但是項目大了，編寫代碼的人多了，那就麻煩了，因為需要 commit 的方法一多，就會顯得特別混亂，而且以字符串形式代入的話，一旦出了錯，很難排查。

所以，在需要多人協作的大型項目中，最好還是用常量的形式來處理 mutation。

必須是同步函數

我們要記住的是，Mutation 必須是同步函數。

因為我們之所以要通過提交 mutation 的方式來改變狀態數據，是因為我們想要更明確地追蹤到狀態的變化。如果是類似下面這樣異步的話：

mutations: {
 someMutation (state) {
  api.callAsyncMethod(() => {
   state.count++
  })
 }
}

我們就不知道什么時候狀態會發生改變，所以也就無法追蹤了，這與 Mutation 的設計初心相悖，所以強制規定它必須是同步函數。

store.commit('increment') // 任何由'increment'導致的狀態變更都應該在此刻完成

看完上述內容，是不是對如何使用Vuex中的Mutations有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。