Vuex 之 CreateMutation() Higher Order Function

栏目: JavaScript · 发布时间: 6年前

内容简介：實務上在寫 Vuex 時，由於 State 的修改都必須依賴 Mutation，因此 Mutation 寫出來的 code 都相當類似，此時可以建立Vue 2.5.17Vuex 3.0.1

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

Version

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 上找到

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

Vuex 之 CreateMutation() Higher Order Function

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

年入10万，17岁草根少年的网赚实战

陶秋丰 / 重庆出版集团 / 2009-3 / 28.00元

《年入10万：17岁草根少年的网赚实战》以一个17岁的在校大学生的真实故事为大家讲述草根少年的网络赚钱之旅。随着网络的普及以及网上应用的日益增多，要在网络上谋生并不难，比如网上写稿、网上兼职、威客赚钱、网上开店等，然而要利用互联网赚大钱，并成就一番事业，那么创建并运营一个独立的网站就是一个绝佳的选择。本书的作者正是经历了“网上写稿一网上各类兼职一策划并创建网站一网站推广与运营一年入10万”这一过程......一起来看看《年入10万，17岁草根少年的网赚实战》这本书的介绍吧!

码农工具