Лучшая обработка подхода: «Не изменяйте состояние хранилища vuex вне обработчиков мутаций» - PullRequest
Новая
       9

Лучшая обработка подхода: «Не изменяйте состояние хранилища vuex вне обработчиков мутаций»

1 голос
/ 16 апреля 2019

Заранее : Мое приложение работает, как предполагалось, но я хочу знать, есть ли у меня лучший подход к проблеме.

Ситуация :У меня есть проект, в котором я сейчас внедряю систему разрешений.Текущий поток предназначен для загрузки определенных объектов (в данном случае - user) и inject разрешений впоследствии.

Задача : Получение 'Не изменять мутирование vuexхранить состояние вне обработчиков мутаций. ' ошибка внутри vuex-action.

Вопрос: Есть ли лучший способ пропустить ошибку, чем мой подход ниже?

Упрощенно это выглядит так (здесь я получаю свои объекты из нашего 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
  }
}

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

Обходной путь : я добавил мутацию, которая изменяет объект пользовательского состояния для меня внутри обработчик мутаций . 

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

1 Ответ

1 голос
/ 16 апреля 2019

Действия не изменяют состояние.Действия существуют для выполнения асинхронных задач.Когда вы хотите изменить состояние в действии, вы должны полагаться на мутацию, используя этот синтаксис: commit('MUTATION_NAME', payload)

Тогда: 

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

Это чистый и правильный путь.

...