Pinia ni maktaba rasmi ya Vue kwa usimamizi wa hali (mrithi wa Vuex) — store iliyokusanywa kwa hali ambayo inahitaji kubagishwa kati ya sehemu nyingi, na API rahisi na salama ambayo imejengwa kwenye Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Hii "setup store" inaonekana haswa kama composable — ref kwa hali, computed kwa getters, kazi kwa actions — ikifanya iwe angavu ikiwa unajua 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>
Muhimu: tumia storeToRefs wakati wa kuoza hali/getters — kuoza kwa kawaida kungebomoa reactivity (onyo sawa la reactivity kama reactive). Actions haziihitaji.
✓ 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 ni suluhisho la kawaida kwa hali ya kimataifa, iliyobagishwa katika programu za Vue — mtumiaji/uthibitisho, karata za biashara, mipangilio ya programu, data iliyocached — kila kitu ambacho sehemu nyingi zijazijazo lazima zisoma na kubadilikabadilika kwa njia sawa.
API yake katika mtindo wa composable, msaada wa daraja la kwanza la TypeScript, na ukosefu wa stereotaipu ya Vuex inaifanya kuwa chaguo linalopendekeza.
Kujua kuufika kwa ajili (dhidi ya props/inject) wakati hali ni ya kweli ya kimataifa, na kutumia storeToRefs kuhehefu reactivity katika kuoza, ni moyo wa kuitumia kwa usahihi.