Хранилище
В Pinia хранилище (store) — это объект, который управляет состоянием вашего приложения. Оно похоже на централизованное хранилище данных, где можно сохранять и управлять состоянием, разделенным на отдельные модули для удобства и масштабируемости.
- state (состояние) — хранит данные. Это реактивное состояние, к которому можно получить доступ в любом компоненте приложения.
- getters — это вычисляемые свойства, которые позволяют получать производные данные из состояния. Они напоминают computed свойства в компонентах Vue.
- actions — методы для изменения состояния. В отличие от Vuex, в Pinia можно напрямую изменять state в actions, и они могут быть синхронными или асинхронными.
Определение хранилища
Для создания хранилища в Pinia используется функция defineStore. Например, создадим хранилище для управления состоянием пользователя.
- state: здесь мы определяем реактивные данные хранилища.
- actions: методы для изменения состояния. Они могут быть синхронными или асинхронными.
- getters: вычисляемые свойства для получения производных данных из состояния.
Использование хранилища
Теперь давайте используем это хранилище в компонентах Vue
- Хранилище useUserStore вызывается в setup для доступа к данным и методам.
- Данные (state) и методы (actions, getters) можно использовать как обычные реактивные переменные и функции в компонентах Vue.
- Для изменения состояния используется вызов методов login, logout, setName.
Работа с хранилищем вне компонентов
Pinia позволяет использовать хранилище в любом месте приложения, не только в компонентах. Например, в router guard
Этот код проверяет, вошел ли пользователь в систему, и если нет, перенаправляет его на страницу логина.
Таким образом, Pinia предоставляет простой и мощный способ управления состоянием во Vue-приложениях
Заключение
Pinia — это мощный инструмент для управления состоянием в приложениях Vue.js, который предлагает простоту и гибкость по сравнению с Vuex. Определение хранилища через defineStore позволяет организовать данные приложения, делать их реактивными и доступными во всех компонентах. Состояние (state) хранит данные, а вычисляемые свойства (getters) предоставляют производные значения на основе состояния. Асинхронные и синхронные действия (actions) дают возможность легко изменять данные и управлять взаимодействиями с API
Pinia также позволяет использовать хранилища в любых частях приложения, включая компоненты, роутеры и другие области, что делает его универсальным решением для работы с глобальным состоянием.