Pinia yaiku perpustakaan manajemen status resmi Vue (penerus Vuex) — store terpusat kanggo status sing kudu dibagi karo pirang-pirang komponen, kanthi API sing prasaja lan type-safe dibangun ing Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Iki "setup store" kalook kaya composable — ref kanggo status, computed kanggo getter, fungsi kanggo aksi — nggawe intuitif yen mengerti 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>
Penting: gunakake storeToRefs nalika mendekonstruksi status/getter — dekonstruksi padha biyen bakal nglumpukake reaktivitas (pituduh reaktif sing padha karo reactive). Aksi ora perlu.
✓ 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 yaiku solusi standar kanggo status global lan dibagi ing aplikasi Vue — user/auth, sabendhul, setelan aplikasi, data cached — apa wae sing pirang-pirang komponen adoh kudu maca lan nganyari kanthi konsisten.
API gaya composable, dukungan TypeScript kelas satu, lan ora ana boilerplate Vuex nggawe iku pilihan sing direkomendasikake.
Mangerti kapan nggunakake (lawan props/inject) nalika status bener-bener global, lan nggunakake storeToRefs kanggo njaga reaktivitas ing dekonstruksi, yaiku inti saka nggunakake bener.