Каковы различия между мутациями и действиями в Vuex?

Vuex — это библиотека для управления состоянием в приложениях Vue.js, и она использует некоторые концепции для организации потоков данных. Две ключевые концепции в Vuex — это мутации (mutations) и действия (actions). В этой статье мы рассмотрим их различия.

Мутации (Mutations)

Мутации — это единственный способ изменить состояние в хранилище Vuex. Они должны быть синхронными, что означает, что все изменения состояния должны происходить в строго определенном порядке.

Пример мутации

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

В этом примере мы определяем мутацию increment, которая увеличивает значение count на единицу. Чтобы вызвать мутацию, вы должны использовать метод commit.

store.commit('increment');

Действия (Actions)

Действия — это методы, которые могут содержать асинхронный код. Они могут вызывать мутации, а также выполнять другие операции, такие как выполнение запросов к API. Действия создаются для того, чтобы сосредоточиться на логике и обработке побочных эффектов, в то время как мутации сосредотачиваются на изменении состояния.

Пример действия

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    async incrementAsync({ commit }) {
      await new Promise(resolve => setTimeout(resolve, 1000)); // имитируем задержку
      commit('increment');
    }
  }
});

В этом примере действия incrementAsync сначала ожидают одну секунду, а затем вызывают мутацию increment, чтобы увеличить count. Чтобы вызвать действие, вы используете метод dispatch.

store.dispatch('incrementAsync');

Сравнение

• Синхронность: Мутации всегда синхронные, а действия могут быть асинхронными.
• Использование: Мутации используются для изменения состояния, а действия — для логики и асинхронного кода.
• Вызов: Чтобы вызвать мутацию, используется commit, а для вызова действия — dispatch.

Заключение

Понимание разницы между мутациями и действиями в Vuex является ключом к эффективному управлению состоянием в вашем приложении. Используя эти концепции, вы сможете лучше организовать и управлять состоянием вашего приложения, а также сделать код более читаемым и поддерживаемым.