Действия / Экшены
- Вместо изменения состояния действия вызывают мутации.
- Действия могут поддерживать произвольные асинхронные операции.
Зарегистрируем простой экшен
Обработчики действий получают контекст объекта, который предоставляет тот же набор методов/свойств в хранилище экземпляра, поэтому вы можете вызвать 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
Цепочки действий
Действия часто асинхронны, так же как мы узнаем, когда действие выполнено? И что еще более важно: можем ли мы выполнить несколько действий для обработки более сложных асинхронных потоков?
Можно обернуть работу экшена в промис и вернуть его
Дальше можно использовать цепочку экшенов
Более живой пример