Pinia este biblioteca oficială de gestionare a stării Vue (succesoarea Vuex) — un store centralizat pentru starea care trebuie să fie partajată în multe componente, cu un API simplu și type-safe construit pe Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Acest "setup store" arată exact ca un composable — ref pentru stare, computed pentru getters, funcții pentru actions — ceea ce este intuitiv dacă cunoști 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>
Important: utilizează storeToRefs atunci când desfaci starea/getters — desfacerea obișnuită ar rupe reactivitatea (aceeași avertisment reactiv ca reactive). Actions nu au nevoie de aceasta.
✓ 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 este soluția standard pentru starea globală și partajată în aplicațiile Vue — user/auth, coșuri de cumpărături, setări de aplicație, date în cache — orice ar trebui să fie citit și actualizat consistent de către multe componente îndepărtate.
API-ul în stil composable, suportul de primă clasă pentru TypeScript și lipsa codului standard al Vuex o fac alegerea recomandată.
A ști când să o apelezi (vs props/inject) atunci când starea este cu adevărat globală, și a folosi storeToRefs pentru a păstra reactivitatea la desfacere, este nucleul utilizării corecte a acesteia.