iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
1
自我挑戰組

Vuex 學習筆記系列 第 7

[Vue.js] Vuex 學習筆記 (7) - mutations 的核心概念

  • 分享至 

  • xImage
  •  

Mutations

提交 mutations 是改變 Vuex 中 store 的唯一方式。 mutations 非常類似於組件中的事件(event),每個 mutation 都有一個字串的  事件類型 (type) 和一個回調函數 (handler), handler 就是我們實際進行狀態更改的地方,並且他會接受 state 作為第一個參數。

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

我們不能  像調用 state 一樣調用 mutations ,而是要以 store.commit 的方法來做呼叫。

store.commit('increment');

提交 PayLoad

我們可以在 store.commit 傳入額外的參數

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

在多數情況下, payload 應該是一個物件,這樣就可以包含更多的資料。

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

物件風格的 commit 方式

我們可以在物件中使用 type 來指定對應的 mutations。

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

Mutations 遵守 Vue 的響應規則

因為 Vuex 中的 store 的 state 是響應式的,那麼當我們變更 state 時,監控 state 的組件也會自動更新,這也意味著 Vuex 中的 mutations 也需要與使用 Vue 一樣遵守下列的注意事項:

  1. 最好提前在 store 中初始化好所有所需的屬性。
  2. 當新增新的屬性到物件時,你應該:
    • 使用 Use Vue.set(obj, 'newProp', 123)
    • 或是以新物件替換舊物件,例如我們可以利用物件展開運算符來寫:
  state.obj = { ...state.obj, newProp: 123 }

使用常量提供 mutations 類型

在各種 Flux 實現中,使用常量用於 mutations 類型是一種常見的模式,這樣可以使 IDE 中的各式 linter 工具發揮作用,並將所有常量放在一個文件中,讓你的協作者可以快速瀏覽整個應用程序中可能發生的變化。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// 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
    }
  }
})

用不用常量取決於自己,但在需要多人協作的大型項目中使用會很有幫助。

mutations 必須是同步函數

mutations 必須是同步函數,這非常重要,我們用以下的例子來說明:

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

假設我們正在 debug 一個 app 並且觀察 devtool 中的 mutation 日誌,當每一條 mutations 被記錄時,devtools 都需要捕捉到前一和後一個 state 的快照。
然而在上面的例子中, mutations 裡使用異步函數回調,devtools 不會知道什麼時候回調函數實際上被調用,因為當 mutations 被觸發的時候,回調函數還沒有被調用,因此這樣在任何回調函數中改變 state ,state 的狀態是無法追蹤的。

在組件中提交 mutations

我們可以在組件中使用 this.$store.commit('xxx') ,提交 mutations 或者使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 來調用。

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

      // `mapMutations` 也支援 payloads:
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
  }
}

備註

在 mutation 中混合異步調用會導致你的程式很難被測試。例如,當你調用了兩個包含異步回調的 mutation 來改變狀態,你如何知道什麼時候回調和哪個先回調呢?這就是為什麼我們要區分這兩個概念。在 Vuex 中,mutation 都是同步事務。

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

同步收錄於部落格


上一篇
[Vue.js] Vuex 學習筆記 (6) - mapState 與 mapGetters 合併使用
下一篇
[Vue.js] Vuex 學習筆記 (8) - actions 的核心概念
系列文
Vuex 學習筆記20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Amigo
iT邦新手 5 級 ‧ 2019-09-11 08:45:13

請問:mutations 必須是同步函數,是程式架構上管理的規則?還是寫在mutations就可以怎樣達到同步?因為後者我試不出來,想跟您確認一下

Nomi Su iT邦新手 5 級 ‧ 2019-09-11 11:03:54 檢舉

Hi

Mutations 主要的功能是修改 store 中的參數,要做 mutations 是因為可以方便讓我們追蹤 store 中的參數是如何被修改的。

如果你需要用非同步的方式,需要寫在 action 中,例如,你今天要取得一個 API 的 response,並想儲存這個 response 中的 id,那作法會如下:

store:{
    id:null
},
mutation:{
    SET_ID:(store,id){
    store.id=id
    }
},
action:{
    async getFromAPI({commit}){
        var id = await getID()
        // 取得 id 後,在 commit 進去,這樣未來我們才知道 id 在哪裡被修改了
        commit("SET_ID",id)
    }
}
Amigo iT邦新手 5 級 ‧ 2019-09-16 17:33:34 檢舉

謝謝!

我要留言

立即登入留言