Что такое мутации и что такое экшены в контексте управления состоянием?

Мутации и экшены — два базовых элемента управления состоянием во Vuex. Мутации (mutations) — это синхронные функции, которые единственным способом изменяют состояние (state). Экшены (actions) — это асинхронные функции, которые выполняют побочные эффекты (запросы к API, таймеры) и вызывают мутации через commit.

Разделение нужно для предсказуемости: мутации строго синхронны, поэтому Devtools может точно логировать каждое изменение. Если мутация содержит асинхронный код, порядок изменений перестаёт быть детерминированным — дебажить становится сложно. Экшены решают эту проблему: они позволяют асинхронно подготовить данные, а затем коммитят синхронную мутацию.

Пример типичного стора:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload;
    }
  },
  actions: {
    incrementAsync({ commit }, amount) {
      setTimeout(() => {
        commit('increment', amount);
      }, 1000);
    }
  }
});

Из компонента мутацию напрямую вызвать нельзя — только через store.commit('increment', 1) или this.$store.commit(). Экшены запускаются через store.dispatch('incrementAsync', 5). Это даёт единую точку входа для асинхронной логики.

Важно: компоненты не должны обращаться к состоянию напрямую (хотя технически могут через mapState), но изменять — только через мутации. Экшены могут коммитить несколько мутаций (например, сперва setLoading(true), потом setData). Также экшены могут диспатчить другие экшены, формируя цепочки для сложной бизнес-логики.

На практике junior разработчику стоит запомнить:

• Мутации — синхронные, экшены — асинхронные.
• Только мутации меняют state.
• Экшены работают с внешними данными и вызывают commit.
• Порядок вызовов важен: диспатч экшена → commit мутации → обновление UI.