Pinia je zvanična Vue biblioteka za upravljanje stanjem (nasljednica Vuexa) — centralizirana store za stanje koje trebate dijeliti između mnogih komponenti, s jednostavnim, type-safe API-jem izgrađenim na Composition API-ju.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Ovaj "setup store" izgleda točno kao composable — ref za stanje, computed za getters, funkcije za actions — čineći ga intuitivnim ako znate 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>
Važno: koristite storeToRefs kada destrukturirate stanje/getters — obični destructuring bi slagao reaktivnost (ista reaktivna opasnost kao reactive). Actions to ne trebaju.
✓ 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 standardno rješenje za globalno, dijeljeno stanje u Vue aplikacijama — user/auth, shopping carts, app postavke, cacheirani podaci — bilo što što mnoge udaliene komponente trebaju doslovno čitati i ažurirati.
Njezin composable-style API, prva-klasa TypeScript podrška i odsutnost Vuexovog boilerplate-a čini je preporučenim izborom.
Znati kada ga koristiti (naspram props/inject) kada je stanje stvarno globalno, i koristiti storeToRefs kako bi se reaktivnost sačuvala na destructuring, je srž njegove ispravne upotrebe.