Единственный способ фактически изменить состояние хранилища Vuex — совершить мутацию. Мутации Vuex очень похожи на события. Каждая мутация имеет строковый тип и обработчик. В функции-обработчике мы выполняем фактические изменения состояния, и она получит состояние в качестве первого аргумента

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

Вы можете вызывать мутации передавая туда дополнительные данные

В большинстве случаев полезные данные должны быть объектом, чтобы он мог содержать несколько полей, а записанная мутация также будет более описательной

Альтернативный способ совершить мутацию — напрямую использовать объект, имеющий свойство type

При использовании фиксации в объектном стиле весь объект будет передан в качестве полезных данных обработчикам мутаций, поэтому обработчик останется прежним

Это распространенный шаблон использования констант для типов мутаций в различных реализациях Flux. Это позволяет коду использовать преимущества таких инструментов, как линтеры, а размещение всех констант в одном файле позволяет вашим коллегам сразу получить представление о том, какие мутации возможны во всем приложении

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

Важно помнить одно важное правило: функции обработчика мутаций должны быть синхронными. Почему? Рассмотрим следующий пример:

Теперь представьте, что мы отлаживаем приложение и просматриваем журналы мутаций инструмента разработчика. Для каждой зарегистрированной мутации инструменту разработчика необходимо будет делать снимки состояния «до» и «после». Однако асинхронный обратный вызов внутри приведенного выше примера мутации делает это невозможным: обратный вызов еще не вызывается, когда мутация зафиксирована, и у devtool нет возможности узнать, когда обратный вызов действительно будет вызван - любая мутация состояния, выполненная в обратном вызове по сути не отслеживается.

Вы можете вызывать мутацию из компонента this.$store.commit('xxx') или использовать mapMutations

Запомните, что во vuex мутации это синхронные операции, а экшены - асинхронные, рассмотрим их в следующем уроке.