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

Vuex строится вокруг чёткого разделения ролей между разными сущностями хранилища.

State

state — это единый источник истины.

Особенности:

• хранит данные приложения

• реактивен

• используется компонентами для отображения UI

Пример:

state: {
  user: null,
  isLoading: false
}

Mutations

mutations отвечают за изменение состояния.

Особенности:

• всегда синхронные

• единственный допустимый способ изменить state

• легко отслеживаются при отладке

Пример:

mutations: {
  setUser(state, user) {
    state.user = user;
  }
}

Actions

actions инкапсулируют бизнес-логику.

Особенности:

• могут быть асинхронными

• не изменяют state напрямую

• вызывают mutations

Пример:

actions: {
  async fetchUser({ commit }) {
    const user = await api.getUser();
    commit('setUser', user);
  }
}

Логика взаимодействия

1. Компонент вызывает action

2. Action выполняет логику

3. Action коммитит mutation

4. Mutation изменяет state

Вывод

state, mutations и actions образуют предсказуемый поток данных, упрощающий управление сложным состоянием приложения.