A Pinia a Vue hivatalos állapotkezelési könyvtára (a Vuex utódja) — egy centralizált store az állapothoz, amelyet sok komponens között kell megosztani, egyszerű, type-safe API-val, amely a Composition API-ra épül.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Ez a "setup store" pontosan olyan, mint egy composable — ref az állapothoz, computed a getterekhez, függvények az action-hökhöz — intuitívvá teszi, ha ismeri a Composition API-t.
<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>
Fontos: az állapot/getters destrukturálásánál használja a storeToRefs-et — az egyszerű destrukturálás megtöri a reaktivitást (ugyanez a reaktivitás figyelmeztetés, mint a reactive). Az action-ök nem igényelnek ilyet.
✓ 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
A Pinia a standard megoldás a globális, megosztott állapothoz a Vue alkalmazásokban — felhasználó/hitelesítés, bevásárlókocsik, alkalmazás beállítások, gyorsítótározott adatok — bármi, amit sok távoli komponensnek konzisztensen olvasnia és frissítenie kell.
A composable-stílusú API-ja, az első osztályú TypeScript támogatás és a Vuex boilerplate-jének hiánya teszik ajánlott választássá.
Tudni, hogy mikor kell rá hivatkozni (vs props/inject), amikor az állapot valóban globális, és a storeToRefs használata a reaktivitás megőrzésére destrukturáláskor, a helyes használat lényege.