Pinia is Vue's officiële state-management library (de opvolger van Vuex) — een gecentraliseerde store voor state die over veel componenten moet worden gedeeld, met een eenvoudige, type-veilige API gebouwd op de Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Deze "setup store" ziet er precies uit als een composable — ref voor state, computed voor getters, functies voor actions — wat intuïtief is als je de Composition API kent.
<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>
Belangrijk: gebruik storeToRefs bij destructuring van state/getters — gewone destructuring zou reactiviteit breken (dezelfde reactieve voorzichtigheid als bij reactive). Actions hebben dit niet nodig.
✓ 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 is de standaard oplossing voor globale, gedeelde state in Vue apps — user/auth, winkelwagens, app-instellingen, cached gegevens — alles wat veel verderaf liggende componenten consistent moeten lezen en bijwerken.
De composable-stijl API, eersteklas TypeScript-ondersteuning en het ontbreken van Vuex's boilerplate maken het de aanbevolen keuze.
Weten wanneer je het moet gebruiken (in plaats van props/inject) wanneer state echt globaal is, en storeToRefs gebruiken om reactiviteit te behouden bij destructuring, is de kern van correct gebruik.