面试官：在vuex中，在一个mutations内部想调用另一个mutation可以怎么写？

慵懒小猫咪2024-04-19 18:19

在 Vuex 中，通常不建议在 mutations 内部直接调用另一个 mutation。mutations 应该是同步的，并且直接改变状态。如果在一个 mutation 中调用另一个 mutation，可能会导致状态更新的顺序和时机变得难以预测和调试。

然而，如果你确实有这样的需求，可以通过以下方式间接实现：

使用辅助函数：创建一个辅助函数来封装状态更改的逻辑，然后在需要的地方调用这个函数。

javascript 复制代码

const changeState = (state, payload) => {  
  // 在这里编写你的状态更改逻辑  
  state.someProperty = payload;  
};  
  
export default new Vuex.Store({  
  mutations: {  
    mutationA(state, payload) {  
      changeState(state, payload);  
      // 其他逻辑...  
    },  
    mutationB(state, payload) {  
      changeState(state, payload);  
      // 其他逻辑...  
    }  
  }  
});

使用 actions ：如果你需要在 mutations 之间进行更复杂的逻辑或异步操作，那么应该使用 actions。actions 可以包含任意异步操作，并且可以调用多个 mutations。

javascript 复制代码

export default new Vuex.Store({  
  mutations: {  
    mutationA(state, payload) {  
      // 更新状态...  
    },  
    mutationB(state, payload) {  
      // 更新状态...  
    }  
  },  
  actions: {  
    actionC({ commit }, payload) {  
      commit('mutationA', payload);  
      // 其他逻辑...  
      commit('mutationB', anotherPayload);  
    }  
  }  
});

总之，尽管技术上可以在 mutations 内部调用另一个 mutation，但这通常不是推荐的做法。你应该考虑使用辅助函数或 actions 来满足你的需求。