Действия / Экшены

actions
Экшены аналогичны мутациям, отличие заключаются в том, что:
  • Вместо изменения состояния действия вызывают мутации.
  • Действия могут поддерживать произвольные асинхронные операции.

Зарегистрируем простой экшен

Обработчики действий получают контекст объекта, который предоставляет тот же набор методов/свойств в хранилище экземпляра, поэтому вы можете вызвать context.commit для вызова мутаций или получить доступ к состоянию и методам получения через context.state и context.getters. Можно даже вызвать другие экшены с помощью context.dispatch

Чтобы каждый раз не писать context.commit и context.dispatch воспользуемся деструктуризацией

Вызов действия

Экшены вызываются с помощью метода dispatch - store.dispatch

На первый взгляд это может показаться глупым: если мы хотим увеличить счетчик, почему бы нам просто не вызывать store.commit('increment') напрямую? Помните, что мутации должны быть синхронными. Действия нет. Мы можем провести асинхронные операции внутри экшена

Экшены выполняются в том же виде, что и мутации

Более практический пример, экшен по оформлению заказа в корзине покупок, который включает в себя вызов асинхронного API и запуск нескольких мутаций

mapActions

Мы можем вызывать экшены в компонентах с помощью this.$store.dispatch('xxx') или используя mapActions 

Цепочки действий

Действия часто асинхронны, так же как мы узнаем, когда действие выполнено? И что еще более важно: можем ли мы выполнить несколько действий для обработки более сложных асинхронных потоков?

Можно обернуть работу экшена в промис и вернуть его

Дальше можно использовать цепочку экшенов

Более живой пример