Pinia on Vuen virallinen tilan hallintakirjasto (Vuexin seuraaja) — keskitetty store tilalle, joka on jaettava useiden komponenttien välillä, yksinkertaisella, tyyppiturvallisella API:lla, joka on rakennettu Composition API:n päälle.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Tämä "setup store" näyttää täsmälleen kuin composable — ref tilalle, computed gettereihin, funktiot actioneille — jolloin se on intuitiivinen, jos tunnet Composition API:n.
<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>
Tärkeää: käytä storeToRefs kun destructuroisit tila/getterit — tavallinen destructurointi rikkoutuisi reaktiivisuuden (sama reaktiivivaroitus kuin reactive). Actionit eivät tarvitse sitä.
✓ 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 on vakioratkasu globaaliin, jaettuun tilaan Vue-sovelluksissa — käyttäjä/todentaminen, ostoskorit, sovelluksen asetukset, välimuistiin tallennettu data — mitä tahansa, jota useiden etäisten komponenttien on luettava ja päivitettävä johdonmukaisesti.
Sen composable-tyyppinen API, ensimmäisen luokan TypeScript-tuki ja Vuexin boilerplaten puute tekevät siitä suositelluimman valinnan.
Tietää milloin siihen turvaudutaan (vs props/inject) kun tila on todella globaali, ja käyttää storeToRefs säilyttämään reaktiivisuuden destructuroinnissa, on sen oikean käyttämisen ydin.