Экшены (actions)
Экшены (actions) в Pinia — это методы хранилища, которые могут изменять состояние (state) или выполнять любые другие операции, такие как вызовы API или асинхронные задачи. В отличие от Vuex, в Pinia можно напрямую изменять состояние внутри экшенов, что делает их более гибкими и удобными для использования.
Определение простого экшена
Экшены определяются в объекте actions внутри хранилища. Вот пример экшена, который добавляет новый товар в корзину.
- addItem — экшен, который добавляет новый элемент в массив items. Он напрямую изменяет состояние, что является особенностью Pinia по сравнению с Vuex.
Использование экшена в компоненте
Теперь давайте используем этот экшен в компоненте Vue.
- Экшен addItem вызывается при нажатии на кнопку, добавляя новый товар в корзину.
Асинхронные экшены
Экшены могут быть асинхронными, что позволяет легко работать с API. Давайте создадим экшен для загрузки списка товаров с сервера.
- fetchItems — асинхронный экшен, который загружает данные с API, устанавливает флаг загрузки (loading) и обновляет список товаров.
- В блоке finally флаг loading сбрасывается после завершения операции.
Использование асинхронного экшена в компоненте
Теперь давайте вызовем этот асинхронный экшен в компоненте и покажем процесс загрузки товаров.
- Кнопка "Загрузить товары" вызывает асинхронный экшен fetchItems, который загружает товары и обновляет список.
- Пока товары загружаются, отображается текст "Загрузка...".
Экшены с несколькими операциями
Экшены могут включать в себя несколько операций или вызов других экшенов. Например, экшен для добавления товара в корзину может сначала проверять наличие товара на складе.
- checkItemAvailability — экшен для проверки наличия товара на сервере.
- addItemToCart — экшен для добавления товара в корзину, который сначала проверяет его доступность через другой экшен.
Использование экшенов с несколькими операциями в компоненте
В компоненте можно вызвать эти экшены следующим образом
Заключение
Экшены в Pinia предоставляют гибкий способ для управления состоянием, обработки асинхронных операций и выполнения бизнес-логики. Они могут изменять состояние напрямую, без необходимости использовать мутации, что упрощает структуру кода. Возможность вызова асинхронных операций и использования нескольких экшенов в одном позволяет легко работать с API и сложной логикой.
Pinia делает работу с экшенами удобной и интуитивной, помогая разработчикам писать чистый и поддерживаемый код, особенно в приложениях с большим количеством данных и взаимодействий с сервером.