Vuex异步Mutation未返回最新状态值，是否属于反模式？

核心结论：Mutation内用异步操作是Vuex反模式 #

Vuex官方明确规定Mutation必须是同步函数。Mutation的作用是同步修改state，Vuex需要通过同步的状态变更来追踪状态变化轨迹，异步操作会让状态变更变得不可预测，同时Vue Devtools也无法正确记录状态的变更过程。你在updateConversationBasedOnAssignedUser里使用async/await和axios异步请求，完全违反了这个规范，这就是问题的根源。

为什么test里拿到的是'HELLO WORLD' #

你的代码执行流程是这样的：

1. 调用commitAssignedUserChange action，执行await commit('updateConversationBasedOnAssignedUser', id)
2. commit调用异步Mutation函数，Mutation先同步把state.current_action设为'HELLO WORLD'，然后发起axios异步请求
3. 虽然Mutation是async函数，但Vuex的commit方法本身不处理异步逻辑，它只是调用Mutation函数后立即返回，并不会等待内部的axios请求完成
4. 此时action里的await commit(...)看似在等待，但实际上commit返回的Promise并不会被Vuex正确处理，导致action提前执行后续的commit('test')，这时axios请求还未完成，current_action自然还是'HELLO WORLD'
5. 等axios请求结束后，Mutation才会修改current_action为'ADD'或'REMOVE'，但这时候test已经执行完了

正确的写法：异步逻辑移到Action，Mutation只做同步修改 #

把axios请求放到Action中处理，Mutation仅负责同步更新state：

const state = { 
    current_action: 'IGNORE',
}

const actions = {
    async commitAssignedUserChange({ commit }, { id }) {
        // 先设置临时状态
        commit('setCurrentAction', 'HELLO WORLD');
        try {
            // 等待异步请求完成
            const { data } = await axios.get(API_CALL);
            const { success } = data;
            // 根据请求结果提交最终状态
            commit('setCurrentAction', success ? 'ADD' : 'REMOVE');
        } catch (err) {
            console.log(err);
        }
        // 确保异步逻辑完成后再执行test
        commit('test');
    }
}

const mutations = {
    test(state) {
        alert(state.current_action);
    },
    setCurrentAction(state, action) {
        state.current_action = action;
    }
}

关键总结 #

1. 永远不要在Mutation里写异步代码，这是Vuex的核心规范，违反它会导致状态变更混乱、调试困难
2. 所有异步操作（比如API请求）都应该放在Action中，Action支持async/await，可以等待异步逻辑完成后，再通过commit调用同步Mutation修改state
3. 这样修改后，test会在异步请求完成、current_action更新为最终值后再执行，就能拿到正确的状态了

内容的提问来源于stack exchange，提问作者Dhaval Chheda