善用 Higher Order Function 讓程式碼更精簡

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

Version


Vue 2.5.17
Vuex 3.0.1

Vuex


store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

/** state */
const state = {
name: '',
};

/** mutations */
const setName = (state, payload) => state.name = payload;

const mutations = {
setName,
};

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

一個很典型的 Store 寫法。

12 行

1
const setName = (state, payload) => state.name = payload;

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

實務上這種 code 將不斷地出現,差異只有 state 的部分,因此可以建立自己的 createMutation() Higher Order Function,專門建立這類 function。

createMutation()


vuex.js

1
2
export const createMutation = stateName => 
(state, payload) => state[stateName] = payload;

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

其中 name property 為變動的,可用 array [] 方式以變數取代。

store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue';
import Vuex from 'vuex';
import { createMutation } from "./helpers/vuex";

Vue.use(Vuex);

/** state */
const state = {
name: '',
};

/** mutations */
const mutations = {
setName: createMutation('name'),
};

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

13 行

1
2
3
const mutations = {
setName: createMutation('name'),
};

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

Conclusion


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

Sample Code


完整的範例可以在我的 GitHub 上找到

2018-11-14