Pinia je uradno knjižnico Vue za upravljanje stanja (naslednik Vuexa) — centralizirano skladišče za stanje, ki ga je treba deliti med številnimi komponentami, z enostavnim, typesafe vmesnikom, zgrajenim na Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
To "setup store" izgleda točno kot composable — ref za stanje, computed za getterje, funkcije za akcije — kar je intuitivno, če poznate 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>
Pomembno: pri destrakturiranju uporabite storeToRefs za stanje/getterje — navadna destrakturiranja bi prekinila reaktivnost (ista reaktivna opozorila kot pri reactive). Akcije tega ne potrebujejo.
✓ 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 je standardna rešitev za globalno, skupno stanje v Vue aplikacijah — uporabnik/avtentifikacija, nakupovalne košare, nastavitve aplikacije, predpomnjena podatka — vse, kar morajo številne oddaljene komponente brati in dosledno posodabljati.
Njen API v slogu composable, prva-razredna TypeScript podpora in odsotnost Vuexa-ovega stereotipa jo delajo s priporočljivo izbiro.
Vedeti, kdaj se ga poslužiti (namesto props/inject), kadar je stanje resnično globalno, in uporabiti storeToRefs za ohranitev reaktivnosti pri destrakturiranju, je jedro njene pravilne uporabe.