Vuex 之使用 Higher Order Function 建立 Mutation

實務上在寫 Vuex 時，由於 State 的修改都必須依賴 Mutation，因此 Mutation 寫出來的 Code 都相當類似，此時可以建立 genMutation() Higher Order Function，專門負責建立 Mutation。

Version

macOS Mojave 10.14.6
Vue 2.6.10
Vuex 3.0.1

Vuex

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let state = {
  name: '',
}

let setName = (state, payload) => state.name = payload

let mutations = {
  setName,
}

export default new Vuex.Store({
  strict: true,
  state,
  mutations,
})

一個很典型的 Store 寫法。

12 行

let setName = (state, payload) => state.name = payload

也是很典型的 mutation 寫法，由 payload 去寫入 name state。

實務上這種 code 常重複出現，差異只有 state 的部分，因此可以建立自己的 genMutation() higher order function，專門建立這類 function。

genMutation()

vuex.js

export let genMutation = stateName => (state, payload) => state[stateName] = payload

genMutation() 傳入 stateName 之後，將回傳 (state, payload) => state[stateName] = payload function。

其中 name property 為變動的，可用 [] 以變數取代。

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import { createMutation } from "./helpers/vuex"

Vue.use(Vuex)

let state = {
  name: '',
}

let mutations = {
  setName: genMutation('name'),
}

export default new Vuex.Store({
  strict: true,
  state,
  mutations,
});

13 行

let mutations = {
  setName: genMutation('name'),
};

改用 genMutation() 建立 mutation 後相當清爽，只需傳入 state 名稱即可。

Conclusion

ECMAScript 的 higher order function 非常好用，只要看到某些很類似的 function 重複出現，找出規則後，就可以使用 由 function 回傳 function 的特性，建立這些一直出現的 function