Pinia — официальная библиотека управления состоянием Vue (преемник Vuex) — централизованное хранилище для состояния, которое должно совместно использоваться множеством компонентов, с простым, type-safe API, построенным на Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Это "setup хранилище" выглядит точно как composable — ref для состояния, computed для геттеров, функции для экшенов — что интуитивно, если вы знаете Composition API.
<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { count, double } = storeToRefs(store); // keep state reactive when destructured
const { increment } = store; // actions can be destructured directly
</script>
<template>
<button @click="increment">{{ count }} (x2 = {{ double }})</button>
</template>
Важно: используйте storeToRefs при деструктуризации состояния/геттеров — обычная деструктуризация разрушит реактивность (то же предупреждение реактивности, что и reactive). Экшены в этом не нуждаются.
✓ No mutations boilerplate — actions can mutate state directly
✓ Excellent TypeScript inference (Vuex was painful to type)
✓ Modular by design — many small stores, no nested-module complexity
✓ Composition-API-native, tiny API, devtools support
props/emits → parent ↔ child
provide/inject → share within a subtree
Pinia store → GLOBAL/app-wide shared state (auth user, cart, settings)
accessed by many unrelated components
Pinia — стандартное решение для глобального, общего состояния в приложениях Vue — user/auth, корзины покупок, параметры приложения, кэшированные данные — всё, что множество удалённых компонентов должны последовательно читать и обновлять.
Его composable-стиль API, встроенная поддержка TypeScript и отсутствие шаблонного кода Vuex делают его рекомендуемым выбором.
Знание того, когда к нему обратиться (vs props/inject), когда состояние действительно глобально, и использование storeToRefs для сохранения реактивности при деструктуризации, — это суть его правильного использования.