Pinia yra oficiali Vue valstybės valdymo biblioteka (Vuex nuolatinis), centrinė saugykla valstybei, kuri turi būti bendrinama su daugeliu komponentų, su paprastu, tipams saugiu API, sukurtu remiantis Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Ši "setup saugykla" atrodo lygiai taip pat kaip composable — ref valstybei, computed getter'iams, funkcijos veiksmams — todėl ji intuityvi, jei žinote 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>
Svarbu: naudokite storeToRefs cuando destructurizuojate valstybę/getter'ius — paprastoji destruktūrizacija sutrauktų reaktyvumą (tas pats reaktyvios perspėjimo pavojus kaip ir reactive). Veiksmams tai nereikalinga.
✓ 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 yra standartinis sprendimas globaliai, bendriai valstybei Vue programose — vartotojas/autentifikacija, pirkinių krepšeliai, programos nustatymai, talpinti duomenys — viskas, ką turi perskaityti ir nuosekliai atnaujinti daug tolimų komponentų.
Jos composable stiliaus API, pirmos klasės TypeScript palaikymas ir Vuex boilerplate'ų nebuvimas ją daro rekomenduojamu pasirinkimu.
Žinojimas, kada ja naudotis (prieš props/inject), kai valstybė iš tikrųjų yra globali, ir storeToRefs naudojimas norint išsaugoti reaktyvumą destructuring'e, yra šios tos naudojimo pagrindas.