Расскажите о мутациях в Vuex.

Мутации в Vuex — это единственный способ изменить состояние хранилища. Они синхронны и принимают состояние (state) в качестве первого аргумента. Вторым аргументом может быть объект-payload.

Определяются в объекте mutations модуля или корневого хранилища. Вызываются с помощью метода commit.

// Определение мутации
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Изменение состояния
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Изменение состояния с payload
    }
  }
})

// Вызов мутации
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Ключевые моменты:

• Синхронность: Все мутации исполняются синхронно, что обеспечивает предсказуемость изменений состояния.
• Единственный способ: Только мутации могут напрямую изменять состояние хранилища.
• commit: Для вызова мутаций используется метод store.commit().
• Payload: Мутация может принимать второй аргумент - payload, содержащий дополнительные данные.
• Отслеживание: Vuex Devtools отслеживают все совершенные мутации, что упрощает отладку.

Отличия от действий (actions):

• Синхронность vs Асинхронность: Мутации синхронны, действия могут содержать асинхронные операции.
• Прямое изменение состояния vs Committing Mutations: Мутации напрямую изменяют состояние, действия коммитят мутации.