В чём разница между state, mutations и actions в Vuex?

Question

state хранит данные приложения. mutations отвечают за синхронное изменение состояния. actions используются для асинхронной логики и в итоге вызывают mutations. Такое разделение делает управление состоянием предсказуемым и прозрачным. Это ключевая идея Vuex.

YeaHub · Accepted Answer

Vuex строится вокруг чёткого разделения ролей между разными сущностями хранилища.Statestate — это единый источник истины.Особенности:хранит данные приложенияреактивениспользуется компонентами для отображения UIПример:state: {
  user: null,
  isLoading: false
}
Mutationsmutations отвечают за изменение состояния.Особенности:всегда синхронныеединственный допустимый способ изменить stateлегко отслеживаются при отладкеПример:mutations: {
  setUser(state, user) {
    state.user = user;
  }
}
Actionsactions инкапсулируют бизнес-логику.Особенности:могут быть асинхроннымине изменяют state напрямуювызывают mutationsПример:actions: {
  async fetchUser({ commit }) {
    const user = await api.getUser();
    commit('setUser', user);
  }
}
Логика взаимодействияКомпонент вызывает actionAction выполняет логикуAction коммитит mutationMutation изменяет stateВыводstate, mutations и actions образуют предсказуемый поток данных, упрощающий управление сложным состоянием приложения.