В чем разница между action и mutation

«В чем разница между action и mutation» — вопрос из категории Vue, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Action и mutation — это понятия из Vuex (state management для Vue.js).

Mutation — синхронная операция, которая изменяет состояние (state). Мутации должны быть чистыми функциями и вызываются через commit.

Action — может содержать асинхронный код (API-запросы и т.д.). Действия не изменяют state напрямую, а вызывают мутации через commit. Вызываются через dispatch.

Пример:

mutations: {
  SET_DATA(state, payload) {
    state.data = payload; // Синхронное изменение
  }
},
actions: {
  fetchData({ commit }) {
    axios.get('/api/data').then(res => {
      commit('SET_DATA', res.data); // Асинхронный запрос + мутация
    });
  }
}

Ключевое отличие: мутации меняют state, действия — координируют сложную логику (включая асинхронные операции) и вызывают мутации.