Геттеры (getters) в Pinia
Геттеры (getters) в Pinia позволяют получать производные данные на основе состояния (state). Это очень похоже на computed свойства в компонентах Vue, но с возможностью повторного использования во всех компонентах. Геттеры помогают разделить бизнес-логику и вычисления от данных, делая код более читаемым и управляемым.
Определение простого геттера
Геттеры определяются в объекте getters внутри хранилища. Рассмотрим простой пример
- state хранит массив товаров в корзине.
- totalItems — геттер, который возвращает общее количество всех товаров в корзине, суммируя поле quantity для каждого товара.
Использование геттера в компоненте
Теперь давайте используем этот геттер в компоненте
В этом компоненте мы используем геттер totalItems для отображения общего количества товаров в корзине
Геттер с параметром
Геттеры в Pinia могут принимать параметры, что делает их ещё более гибкими. Давайте создадим геттер для фильтрации товаров по минимальной цене
Теперь можно использовать этот геттер в компоненте и передавать параметр
Композиция геттеров
Геттеры могут использовать другие геттеры для получения более сложных данных. Например, мы можем создать геттер для подсчёта общей стоимости товаров в корзине
- totalPrice — это сумма всех товаров в корзине.
- totalPriceWithDiscount — использует totalPrice и рассчитывает итоговую сумму с учётом скидки.
Здесь пользователь может ввести процент скидки, и итоговая стоимость будет рассчитана с её учётом.
Заключение
Геттеры в Pinia предоставляют мощный механизм для работы с производными данными на основе состояния. Они позволяют организовать бизнес-логику в хранилищах, создавая вычисляемые свойства, которые легко использовать в компонентах. Возможность передавать параметры в геттеры, а также композиция геттеров открывают широкие возможности для гибкой работы с состоянием. Это делает Pinia удобным инструментом для управления как простыми, так и сложными состояниями в приложениях Vue