mutations vuex 調用_vuex的mutations與actions的使用測試

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

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'

...

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

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 真的不敢想。

總結

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

參考連結