Технически, каждый экземпляр компонента Vue уже «управляет» своим собственным реактивным состоянием. В качестве примера возьмем простой компонент счетчика:

В первом случае возможным обходным решением является «поднятие» общего состояния до общего компонента-предка, а затем передача его в качестве пропса. Однако в деревьях компонентов с глубокой иерархией это быстро становится утомительным и приводит к путанице.

Во втором случае мы часто прибегаем к таким решениям, как обращение к прямым родительским/дочерним экземплярам через ссылки на шаблоны или попытки мутировать и синхронизировать несколько копий состояния через создаваемые события. Оба эти шаблона хрупкие и быстро приводят к неподдерживаемому коду.

Более простое и понятное решение — извлечь общее состояние из компонентов и управлять им в глобальном синглтоне. Благодаря этому наше дерево компонентов становится большим «представлением», и любой компонент может получить доступ к состоянию или вызвать действия, независимо от того, где он находится в дереве!

Однако это также означает, что любой импортируемый компонент store может изменять его по своему усмотрению

Существующие пользователи могут быть знакомы с Vuex, предыдущей официальной библиотекой управления состоянием для Vue. Поскольку Pinia выполняет ту же роль в экосистеме, Vuex теперь находится в режиме обслуживания. Он по-прежнему работает, но новых функций больше не получит. Рекомендуется использовать Pinia для новых приложений.

Pinia начиналась как исследование того, как могла бы выглядеть следующая версия Vuex, включив в себя множество идей из обсуждений основной команды Vuex 5. В конце концов в команде поняли, что Pinia уже реализовала большую часть того, что хотели в Vuex 5

По сравнению с Vuex, Pinia предоставляет более простой API с меньшими церемониями, предлагает API-интерфейсы в стиле Composition-API и, что наиболее важно, имеет надежную поддержку вывода типов при использовании с TypeScript