Pinia er Vue's offisielle statushåndteringsbibliotek (etterfølgeren til Vuex) — et sentralisert lager for tilstand som må deles på tvers av mange komponenter, med et enkelt, typesikkert API bygget på Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Dette "setup-lageret" ser nøyaktig ut som en composable — ref for tilstand, computed for getters, funksjoner for actions — noe som er intuitivt hvis du kjenner 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>
Viktig: bruk storeToRefs når du destrukturerer tilstand/getters — vanlig destrukturering ville ødelegge reaktivitet (samme reaktive forvarsel som reactive). Actions trenger det ikke.
✓ 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 er standardløsningen for global, delt tilstand i Vue-apper — bruker/autentisering, handlekurver, appinnstillinger, bufret data — alt som mange fjerne komponenter må lese og oppdatere konsistent.
Dets composable-stilAPI, førsteklasses TypeScript-støtte og mangel på Vuex's standardkode gjør det til det anbefalte valget.
Å vite når man skal gripe til det (kontra props/inject) når tilstanden virkelig er global, og å bruke storeToRefs for å bevare reaktivitet ved destrukturering, er kjernen i å bruke det riktig.