State Management
Pinia (Vue)
Идеи стейт-менеджмента, разобранные на React, не привязаны к React. Разделение серверного и клиентского состояния, единый источник истины, типизированный доступ к стору - всё это одинаково работает и во Vue. Меняется только инструмент: вместо Zustand или Redux официальный стор Vue это Pinia. Тот же дашборд с фильтрами и темой во Vue держит клиентское состояние в Pinia, а серверное - в TanStack Query через Vue-адаптер. Этот урок даёт быстрый ориентир в Pinia с точки зрения уже знакомых понятий. Подробности живут в курсе по Vue.
- Vue-проекты на Nuxt: Pinia это рекомендованный стор для клиентского состояния прямо из документации фреймворка
- Дашборды и админки на Vue: фильтры, тема, состояние сайдбара в Pinia, серверные данные в Vue Query
- GitLab и другие крупные Vue-приложения: переход с Vuex на Pinia как на официальный стор нового поколения
- Кросс-фреймворковые команды: одни и те же принципы стейта переносятся между React и Vue, меняется лишь библиотека
- Setup-сторы Pinia на Composition API: знакомый по React стиль 'состояние плюс функции' вместо отдельных мутаций Vuex
Предварительные знания
- Разделение серверного и клиентского состояния
- Идея единого стора для клиентского состояния (Zustand, Redux)
- Базовое знакомство с Vue и его реактивностью (ref, computed) на уровне идеи
Как Pinia стала официальным стором Vue
Долгое время стандартным стором Vue был Vuex с его строгим разделением на state, getters, mutations и actions. Эдуардо Сан Мартин Мороте, участник основной команды Vue, экспериментировал с более лёгким API поверх Composition API, и эксперимент вырос в Pinia. К 2021 году Pinia настолько превзошла Vuex в эргономике и поддержке TypeScript, что команда Vue объявила её официальным рекомендованным стором, а Vuex - в режиме поддержки. Ключевое упрощение: Pinia убрала отдельные мутации, оставив прямое изменение состояния в экшенах, и предложила setup-сторы в стиле Composition API.
Pinia в кросс-фреймворковом контексте
Принципы стейт-менеджмента не зависят от фреймворка. Разделение на серверное и клиентское состояние, единый источник истины, типизированный доступ к данным - всё это одинаково для React и Vue. Различается лишь инструмент клиентского стора. Там, где в React берут Zustand или Redux, во Vue стандартный выбор это Pinia - официальный стор фреймворка. Понятия переносятся напрямую, меняется синтаксис и привязка к реактивности фреймворка.
Важно, что Pinia не отменяет разделение server-state и client-state из опорного урока. Pinia ведёт именно клиентское состояние Vue: тема, открытость сайдбара, выбранные фильтры до отправки, состояние модалок. Серверные данные во Vue-приложении ведёт TanStack Query через свой Vue-адаптер - тот же кэш со свежестью, что и в React. Класть ответы API в Pinia это тот же антипаттерн, что класть их в Redux.
- Клиентский стор — В React - Zustand или Redux, во Vue - Pinia. Держит тему, фильтры, состояние UI. Принцип единого источника истины общий.
- Серверный кэш — В обоих мирах - TanStack Query (через свой адаптер) или Apollo. Ведёт серверное состояние как кэш, а не как переменную в сторе.
Перенос знаний прямой: тот, кто понял разделение состояний и идею единого стора на React, в Pinia ориентируется быстро. Меняется не модель, а конкретный API и привязка к реактивности Vue через ref и computed.
Какую роль играет Pinia в кросс-фреймворковом сравнении с миром React?
Setup-сторы в стиле Composition API
Pinia предлагает два способа определить стор, и более выразительный - setup-стор. Это функция в стиле Composition API: внутри объявляют ref как реактивное состояние, computed как производные значения (геттеры) и обычные функции как экшены, а затем возвращают то, что должно быть публичным. Стиль 'состояние плюс функции рядом' знаком всем, кто работал с хуками в React.
В компоненте стор подключают вызовом useFilterStore, после чего обращаются к его состоянию, геттерам и экшенам напрямую. Реактивность Vue обеспечивает, что любое чтение city в шаблоне перерисуется при изменении. Состояние меняют прямо в экшенах через присваивание city.value - отдельной церемонии мутаций, как в Vuex, здесь нет.
| Элемент стора | В setup-сторе | Роль |
|---|---|---|
| Состояние | ref(...) | Реактивные данные стора |
| Геттер | computed(...) | Производное значение от состояния |
| Экшен | обычная function | Изменение состояния и логика |
| Публичный API | return { ... } | Что стор отдаёт наружу |
Setup-стор удобен ещё и тем, что в него можно вложить любую логику Composition API: watch, другие composable-функции, даже вызовы Vue Query. Это делает его естественной точкой композиции клиентского состояния во Vue.
Что в setup-сторе Pinia играет роль геттера - производного значения от состояния?
Чем Pinia отличается от Vuex
Pinia пришла на смену Vuex и упростила модель. В Vuex изменить состояние можно было только через отдельные мутации (синхронные), а асинхронную логику держали в экшенах, которые вызывали мутации - лишний слой церемонии. Pinia этот слой убрала: состояние меняют прямо в экшенах присваиванием. Меньше понятий, меньше шаблонного кода, и при этом строгая типизация TypeScript работает из коробки без ручных надстроек.
| Аспект | Vuex | Pinia |
|---|---|---|
| Изменение состояния | Только через мутации | Прямо в экшенах |
| Слоёв в сторе | state, getters, mutations, actions | state, getters, actions |
| TypeScript | Требует ручных типизаций | Выводится из коробки |
| Стиль определения | Объект опций | Опции или setup-функция |
| Статус во Vue | В режиме поддержки | Официальный рекомендованный |
Для пришедших из React это упрощение читается знакомо: Pinia ближе к стилю Zustand, где состояние и функции его изменения лежат рядом, чем к строгому разделению на слои в духе классического Redux с его экшенами и редьюсерами. На этом краткий обзор завершается. Установка Pinia, регистрация сторов в приложении и продвинутые паттерны (композиция сторов, переиспользование геттеров) подробно разобраны в курсе по Vue.
Pinia официально рекомендована командой Vue, а Vuex переведён в режим поддержки. В новых Vue-проектах стандартный выбор клиентского стора это Pinia, и документация Vue ведёт именно к ней.
Какое ключевое упрощение Pinia внесла по сравнению с Vuex?
Связь с другими темами
Краткий обзор в кросс-фреймворковом блоке. Детали Pinia вынесены в курс по Vue:
- Server-state против client-state — То же разделение, что в React: Pinia ведёт клиентское состояние, серверное держит Vue Query
- Pinia: введение — Полное введение с установкой, определением сторов и подключением разобрано в курсе по Vue
- Pinia: паттерны — Геттеры, экшены, композиция и переиспользование сторов подробно идут в курсе по Vue
Итог
- Pinia это официальный рекомендованный стор Vue, пришедший на смену Vuex, и ведёт он клиентское состояние - так же, как Zustand или Redux в мире React
- Setup-стор Pinia это функция в стиле Composition API: ref как состояние, computed как геттеры, обычные функции как экшены. Знакомый стиль 'состояние плюс функции'
- Разделение server-state и client-state кросс-фреймворковое: Pinia держит клиентский стейт Vue, а серверный ведёт TanStack Query через Vue-адаптер
- Главное упрощение против Vuex: нет отдельных мутаций, состояние меняют прямо в экшенах, типизация работает из коробки
- Это краткий ориентир для тех, кто пришёл из React. Установка, паттерны и детали Pinia разобраны в курсе по Vue
Связанные уроки
- sm-30-server-vs-client-state — Разделение server-state и client-state одинаково в любом фреймворке: Pinia ведёт клиентское состояние Vue
- vue-27-pinia-intro — Полное введение в Pinia с установкой и определением сторов разобрано в курсе по Vue
- vue-28-pinia-patterns — Паттерны Pinia (геттеры, экшены, композиция сторов) подробно идут в курсе по Vue