Pinia är Vue:s officiella bibliotek för tillståndshantering (efterföljaren till Vuex) — ett centraliserat store för tillstånd som behöver delas mellan många komponenter, med ett enkelt, typesäkert API byggt på Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Detta "setup store" ser ut precis som en composable — ref för tillstånd, computed för getters, funktioner för actions — vilket gör det intuitivt om du kan 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>
Viktigt: använd storeToRefs när du destructurerar tillstånd/getters — vanlig destructuring skulle bryta reaktiviteten (samma reaktivitets varning som reactive). Actions behöver det inte.
✓ 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 är standardlösningen för globalt, delat tillstånd i Vue-applikationer — användare/autentisering, shoppingvagnar, appinställningar, cachade data — allt som många avlägsna komponenter måste läsa och uppdatera på ett konsekvent sätt.
Dess API i composable-stil, förstklassigt TypeScript-stöd och avsaknaden av Vuex:s boilerplate gör det till det rekommenderade valet.
Att veta när man ska gripa sig till det (kontra props/inject) när tillståndet är verkligen globalt, och att använda storeToRefs för att bevara reaktivitet vid destructuring, är kärnan i att använda det korrekt.