Pinia adalah library pengelolaan state resmi Vue (penerus Vuex) — sebuah store terpusat untuk state yang perlu dibagikan di banyak komponen, dengan API sederhana dan type-safe yang dibangun di atas Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Store "setup" ini terlihat persis seperti composable — ref untuk state, computed untuk getters, fungsi untuk actions — membuatnya intuitif jika Anda tahu 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: gunakan storeToRefs saat mendestruct state/getters — destructuring biasa akan merusak reaktivitas (peringatan reaktivitas yang sama seperti reactive). Actions tidak memerlukan ini.
✓ 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 adalah solusi standar untuk state global dan bersama di aplikasi Vue — user/auth, shopping carts, setelan app, data yang di-cache — apa pun yang banyak komponen jauh harus baca dan perbarui secara konsisten.
API gaya composable-nya, dukungan TypeScript kelas satu, dan tidak adanya boilerplate Vuex menjadikannya pilihan yang direkomendasikan.
Mengetahui kapan menggunakannya (vs props/inject) ketika state benar-benar global, dan menggunakan storeToRefs untuk menjaga reaktivitas pada destructure, adalah inti dari penggunaannya dengan benar.