Question

事前：我的应用程序正在按预期运行，但是我想知道是否有更好的方法来解决这个问题。

情况：我有一个项目，目前正在实现许可系统。当前流程是，要加载特定的对象（在这种情况下，请使用user），然后再加载inject。

问题：获取“请勿在变异处理程序之外变异vuex存储状态。” vuex动作内部错误。

问题：是否有比我下面的方法更好的方法来忽略错误？

简化后的样子（在这里，我从API中获取对象并将其存储在vuex存储中）

// user.js (vuex-module)
state: {
  user: null,
},
mutations: {
  // ... 
  setUser(state, user) {
      state.user = user
  }
}
actions: {
  // ... other vuex-actions
  async login({commit, dispatch}, payload) {
      let userFromDb = DbUtil.getUser(payload) // is an axios call to our api

      // here the permissions get injected
      // action in another vuex-module
      dispatch('permissions/injectPermissions', userFromDb)

      // commiting to store
      commit('setUser', userFromDb)

      return userFromDb
  }
}

我的Permissions.js（这里是向我的对象注入权限）：

// permissions.js (vuex-module)
actions: {
  // ... other vuex-actions

  // payload = user in this example
  async injectPermissions({commit, dispatch}, payload) {
      let permissionFromDb = DbUtil.getPermissions(/* ... */) 

      payload.permissions = permissionFromDb // -> Here I am getting 'Do not mutate vuex store state outside mutation handlers.'-Error, because `payload` == the user from user-state

      return payload
  }
}

解决方法：我添加了一个突变，可以在 mutation-handler 中为我更改用户状态对象。

mutations: {
  /**
  * A 'set'-wrapper to mutate vuex-store variable inside a mutation to avoid getting a error.
  * @param state
  * @param payload:
  *   object - object to be mutated
  *   prop - prop inside object that is affected
  *   value - value that should be assigned
  */
  setWrapper(state, payload) {
   let { object, prop, value } = payload

   object[prop] = value
  }
}

之前发生错误的行更改为：

commit('setWrapper', {
  object: payload,
  prop: 'permissions',
  value: permissionFromDb
})

Answer 1

动作不会改变状态。
那里有执行异步任务的动作。
当您想更改动作中的状态时，必须使用以下语法来依靠突变：commit('MUTATION_NAME', payload)

然后：

MUATATION_NAME(state, payload) {
  state.permissions = payload.permissions
}

这是干净正确的方法。

更好的方法处理：“请勿在变异处理程序之外变异vuex存储状态”错误

1 个答案: