vue.js - 更好的方法处理 : 'Do not mutate vuex store state outside mutation handlers' errors

Question

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

情况:我有一个项目，目前正在实现权限系统。当前的流程是加载特定对象(在本例中让我们采用 user)，然后注入(inject)权限。

问题:在 vuex-action 中获取“不要在突变处理程序之外改变 vuex 存储状态”。错误。

问题:有没有比我下面的方法更好的省略错误的方法？

简化后看起来像这样(这里我从我们的 API 获取我的对象并将它们存储在 vuex-store 中):

// 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(这里我将权限注入(inject)我的对象):

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

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

然后:

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

这是最干净、最正确的方式。