Vuex 之 CreateMutation() Higher Order Function
栏目: JavaScript · 发布时间: 7年前
内容简介：實務上在寫 Vuex 時，由於 State 的修改都必須依賴 Mutation，因此 Mutation 寫出來的 code 都相當類似，此時可以建立Vue 2.5.17Vuex 3.0.1
實務上在寫 Vuex 時，由於 State 的修改都必須依賴 Mutation，因此 Mutation 寫出來的 code 都相當類似，此時可以建立 CreateMutation()
Higher Order Function，專門負責建立 Mutation。
Version
Vue 2.5.17
Vuex 3.0.1
Vuex
store.js
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 行
const setName = (state, payload) => state.name = payload;
也是很典型的 mutation 寫法，由 payload
去寫入 name
state。
實務上這種 code 將不斷地出現，差異只有 state 的部分，因此可以建立自己的 createMutation()
Higher Order Function，專門建立這類 function。
createMutation()
vuex.js
export const createMutation = stateName => (state, payload) => state[stateName] = payload;
createMutation()
傳入 stateName
之後，將回傳 (state, payload) => state[stateName] = payload
function。
其中 name
property 為變動的，可用 array []
方式以變數取代。
store.js
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 行
const mutations = {
setName: createMutation('name'),
};
改用 createMutation()
建立 mutation 後，就相當清爽，只需傳入 state 名稱即可。
Conclusion
-
ECMAScript 的 Higher Order Function 非常好用，只要看到某些很類似的 function 重複出現，找出規則後，就可以使用
由 function 回傳 function的特性，建立這些一直出現的 function
Sample Code
完整的範例可以在我的 GitHub 上找到
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
大思维：集体智慧如何改变我们的世界
杰夫·摩根 / 郭莉玲、尹玮琦、徐强 / 中信出版集团股份有限公司 / 2018-8-1 / CNY 65.00
智能时代，我们如何与机器互联，利用技术来让我们变得更聪明？为什么智能技术不会自动导致智能结果呢？线上线下群体如何协作？社会、政府或管理系统如何解决复杂的问题？本书从哲学、计算机科学和生物学等领域收集见解，揭示了如何引导组织和社会充分利用人脑和数字技术进行大规模思考，从而提高整个集体的智力水平，以解决我们时代的巨大挑战。是英国社会创新之父的洞见之作，解析企业、群体、社会如何明智决策、协作进化。一起来看看 《大思维：集体智慧如何改变我们的世界》 这本书的介绍吧!
