Как правильно изменять vuex state?

Пользователь

от enid , в категории: JavaScript , год назад

Как правильно изменять vuex state?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от leila.dickinson , год назад

@enid 

Вот некоторые рекомендации по изменению состояния Vuex:

  1. Изменяйте состояние только в мутациях: мутации - это единственный способ изменения состояния в Vuex. Никогда не изменяйте состояние напрямую в экшенах или компонентах.
  2. Изменяйте состояние синхронно: мутации в Vuex должны быть синхронными. Это означает, что они не должны содержать асинхронного кода, такого как вызовы API или использование таймеров.
  3. Не мутируйте состояние напрямую: при изменении состояния в мутации, не изменяйте его напрямую. Вместо этого создайте новый объект и верните его из мутации. Например, если вы хотите изменить свойство name в объекте user, вы должны создать новый объект, содержащий обновленное свойство name, и вернуть его из мутации.
  4. Используйте действия для асинхронных операций: если вы хотите выполнить асинхронную операцию, такую как вызов API, используйте действия. В действии вы можете выполнить асинхронную операцию и затем вызвать мутацию для изменения состояния на основе полученных данных.
  5. Разбивайте состояние на модули: если ваше приложение имеет большое состояние, разбейте его на модули. Каждый модуль может иметь свой собственный набор мутаций, действий и геттеров, что помогает упростить управление состоянием.


Пример мутации, которая обновляет свойство name в объекте user:

1
2
3
4
5
6
7
8
mutations: {
  updateUser(state, payload) {
    state.user = {
      ...state.user,
      name: payload.name
    }
  }
}


Здесь мы создаем новый объект, который содержит обновленное свойство name, а затем устанавливаем его как новое значение state.user.