vuex的mutations與actions的使用測試

這裡不談vuex如何使用等問題，只討論 mutaions 中定義的方法需要在 actions 中進行轉發一下嗎？

mutations: {
	muFn (state, data) {
		state.data = data
	}
}
actions: {
	muFn ({commit}, data) {
		commit.muFn(data)
	}
}

現在糾結點在於，在 mutations 中定義了方法，還要在 actions 中再呼叫一遍嗎

起因

在看一些github的專案時，一些人直接在 vue單檔案中，直接呼叫 mutation 裡的方法，而還有一部分人在 vue單檔案中，直接呼叫 action 裡的方法（action再去呼叫 mutation）。而這兩者之間的專案獲取的 start 都比較好，很難明說具體哪個更有優勢。

• 採用 mutation

  • vue2-elm

    • mutation

      import {
      	RECORD_ADDRESS,
      	ADD_CART,
      	REDUCE_CART,
      	INIT_BUYCART,
      	CLEAR_CART,
      	RECORD_SHOPDETAIL,
      	RECORD_USERINFO,
      	GET_USERINFO,
      	CONFIRM_REMARK,
      	CONFIRM_INVOICE,
      	CHOOSE_SEARCH_ADDRESS,
      	SAVE_GEOHASH,
      	CONFIRM_ADDRESS,
      	CHOOSE_ADDRESS,
      	NEED_VALIDATION,
      	SAVE_CART_ID_SIG,
      	SAVE_ORDER_PARAM,
      	CHANGE_ORDER_PARAM,
      	ORDER_SUCCESS,
      	SAVE_SHOPID,
      	SAVE_ORDER,
      	OUT_LOGIN,
      	RETSET_NAME,
      	SAVE_AVANDER,
      	SAVE_ADDRESS,
      	SAVE_ADDDETAIL,
      	SAVE_QUESTION,
      	ADD_ADDRESS,
      	BUY_CART,
      } from './mutation-types.js'
      ...
      
       
      

    • action

      const state = {
        logs: []
      }
      
      const mutations = {
        ADD_ERROR_LOG: (state, log) => {
          state.logs.push(log)
        },
        CLEAR_ERROR_LOG: (state) => {
          state.logs.splice(0)
        }
      }
      
      const actions = {
        addErrorLog({ commit }, log) {
          commit('ADD_ERROR_LOG', log)
        },
        clearErrorLog({ commit }) {
          commit('CLEAR_ERROR_LOG')
        }
      }
      
      export default {
        namespaced: true,
        state,
        mutations,
        actions
      }
       
      

    可以看出， mutation 與 action 根本不對等

• 採用 action

  • vue-element-admin

    • action/mutation

      import {
      	getUser,
      	getAddressList
      } from '../service/getData'
      import {
      	GET_USERINFO,
      	SAVE_ADDRESS
      } from './mutation-types.js'
      
      export default {
      
      	async getUserInfo({
      		commit,
      		state
      	}) {
      		let res = await getUser();
      		commit(GET_USERINFO, res)
      	},
      	async saveAddress({
      		commit,
      		state
      	}) {
      
      		if(state.removeAddress.length > 0) return;
      
      		let addres = await getAddressList(state.userInfo.user_id);
      		commit(SAVE_ADDRESS, addres);	
      	},
      }
      

    可以看出， mutation 裡的方法都會在 action 中再定義一遍。

然後在 github 上找了一些相關的專案，兩種方式都有，在使用 action 這種方式的，在vue單檔案中，幾乎看不到 commit 的存在，這樣是不是有些太偏激了。然後找到了一個 尤大 寫的專案，終於看到了 commit 。

嘗試

基於此，我在本地起了一個專案，分別採用上面的方式進行處理，並沒有發現因為使用 action 而有特別的待遇，只要在 mutaion 中卡住，程式碼依舊不會再執行。說是利用 action 的非同步特性也沒看出所以然來，可能個人偏好程式碼簡化。若是大型專案，裡面N多個 mutation 方法，那 action 真的不敢想。

總結

由於鄙人嘗試了各種方式，沒有找出兩種寫法的差別所在。因而還是看團隊規範吧，但還是希望沒必要特意去重複定義了，累贅不說，還增加了維護成本。

參考連結

https://github.com/vuejs/awesome-vue

https://github.com/yujiahaol68/reddit-app/blob/master/src/store/modules/home.js

https://github.com/YuheiNakasaka/vue-twitter-client/blob/master/app/src/renderer/vuex/modules/notifications.js

https://github.com/jeneser/douban/blob/master/src/store/modules/activities.js

https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/views/ItemList.vue

https://segmentfault.com/q/1010000023505344