Vue.js 更好的方法处理：'；不要在变异处理程序之外变异vuex存储状态'；错误

事先：我的应用程序正在按预期工作，但我想知道是否有更好的方法来解决我遇到的问题

情况：我有一个项目，目前正在实施许可系统。当前的流程是加载特定对象（在本例中，让我们采用

user

），然后

inject

插入权限

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

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

简化后看起来是这样的（这里我从API获取对象并将它们存储在vuex存储中）：

My permissions.js（这里我将权限注入到我的对象）：

解决方法：我添加了一个变异，在变异处理程序中为我更改用户状态对象

在更改为之前引发错误的行：

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

---

动作不会改变状态
存在用于执行异步任务的操作
当您想要更改动作中的状态时，您必须通过使用以下synatx依赖突变：

commit（'mutation\u NAME'，payload）

然后：

---

这是干净正确的方法。

谢谢你的回答。我知道突变-同步，动作-异步是如何工作的。我的问题是，我的方法是否是最干净的方法，或者我的方法是否是一种快速而肮脏的方法来消除我的错误。你的方法是完全正确的（与我上面描述的相同）。但是您可以使用setter和getter实现相同的功能。

// 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
  }
}

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
})

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