Определение состояния
В Pinia состояние (state) — это реактивные данные, которые хранятся в хранилище и могут быть использованы в любом месте приложения. Определяется состояние с помощью функции state, которая возвращает объект.
Пример хранилища для управления товарами
- products хранит список товаров.
- selectedProduct — это товар, который пользователь выбрал.
- loading используется для отслеживания процесса загрузки данных.
Использование состояния и действий в компонентах
Теперь давайте посмотрим, как использовать это хранилище в компонентах Vue.
- Кнопка "Загрузить товары" вызывает метод fetchProducts, который загружает товары и обновляет состояние.
- Товары выводятся в виде списка, и для каждого товара есть кнопка "Выбрать", которая устанавливает выбранный товар.
- Если товар выбран, отображается его информация, а также кнопка для сброса выбора
Управление сложным состоянием с использованием геттеров
Геттеры (getters) позволяют вычислять производные данные на основе состояния. Это удобно, если вам нужно производить вычисления или фильтрацию данных, основываясь на состоянии. Тему геттеров мы рассмотрим подробнее в следующих уроках
Пример геттера для фильтрации товаров
Теперь в компоненте можно использовать этот геттер
- Геттер filteredProducts принимает параметр category и возвращает товары, которые соответствуют этой категории.
- Компонент позволяет пользователю вводить категорию, и список товаров автоматически фильтруется.
Заключение
Pinia предоставляет мощные возможности для управления состоянием в Vue-приложениях, предлагая простую и интуитивную структуру. Определяя состояния с помощью state и управляя ими через actions, можно эффективно реализовать логику вашего приложения. Геттеры позволяют вычислять производные данные, улучшая производительность и удобство работы с состоянием. Pinia делает управление состоянием гибким, простым и масштабируемым, что делает её удобным инструментом для создания сложных Vue-приложений