如何在 Vuex 的动作函数中使用突变函数？答案

【问题标题】：How use a mutation function in a action function in Vuex?如何在 Vuex 的动作函数中使用突变函数？
【发布时间】：2019-08-13 15:52:15
【问题描述】：

我有这个Vuex：

export default new Vuex.Store({
  state: {
    userInfo: {
      nit_ID: { ID: '', Desc: '' },
      userName: { ID: '', Desc: '' },
      typeDocument: { ID: '', Desc: '' },
      document: '',
    },    
    globalPublicKey: 'ASDFGHJKL1234567890',
  },
  mutations: {    
    updateUserInfo(state, payload) {
      state.userInfo = payload;
    }, 
  },
  getters: {
    userInfo: (state) => { return state.userInfo; },
  },
  actions: {
    validateUserSession(context) {
      var valido = false;
      try {       
        let storageInfo = JSON.parse(
          sjcl.decrypt(context.state.globalPublicKey, localStorage.userInfo)
        );
        if (localStorage.userToken === storageInfo.token) {
          context.mutations.updateUserInfo(storageInfo);          
          valido = true;
        }
      } catch (e) {
          console.error(e);
      }
      return valido;
    },
  },
})

但问题是我无法访问mutationupdateUserInfo()，我知道这很容易解决，在我的操作中只做updateUserInfo过程，但问题是如何才能我使用mutation 变成action？

【问题讨论】：

是context.commit，见vuex.vuejs.org/guide/actions.html
是的，context.commit('mutationName', params) - 如果不需要，可以省略 params
@muka.gergely 是的，谢谢，请发布答案：D

标签： javascript vuex vuex-modules

【解决方案1】：

在 VueJS 中，您可以通过调用 context.commit 从 action 调用 mutation，如下所示：

context.commit('mutationName', params)

params 如果未将参数传递给突变，则可以省略。

在此处了解更多信息：vuex.vuejs.org/guide/actions.html

实际上，您可以使用 commit 从任何地方调用突变 - 但建议依次使用 actions（因此 dispatch an action）提交数据（实际上是改变状态）。

【讨论】：