Come funziona la gestione dello stato con Pinia?

Question

Accepted Answer

**Pinia** è la libreria ufficiale di Vue per la gestione dello stato (il successore di Vuex) — un **store** centralizzato per lo stato che deve essere condiviso tra molti componenti, con un'API semplice e type-safe costruita sulla Composition API. ## Definire uno store ```js // stores/counter.js import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useCounterStore = defineStore("counter", () => { // state const count = ref(0); // getters (derived state) = computed const double = computed(() => count.value * 2); // actions (methods that mutate state) function increment() { count.value++; } async function fetchInitial() { count.value = await api.getCount(); } return { count, double, increment, fetchInitial }; }); ``` Questo "setup store" sembra esattamente come un composable — `ref` per lo stato, `computed` per i getter, funzioni per le azioni — rendendolo intuitivo se conosci la Composition API. ## Utilizzare lo store nei componenti ```vue ``` **Importante:** usa `storeToRefs` quando destrutturi **stato/getter** — la destrutturazione semplice romperebbe la reattività (stessa avvertenza reattiva di `reactive`). Le azioni non ne hanno bisogno. ## Perché Pinia al posto di Vuex ```text ✓ 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 ``` ## Quando usare uno store vs props/composables ```text 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 ``` ## Perché è importante Pinia è la soluzione standard per lo **stato globale e condiviso** nelle app Vue — utente/autenticazione, carrelli della spesa, impostazioni dell'app, dati in cache — qualsiasi cosa che molti componenti distanti devono leggere e aggiornare in modo coerente. La sua API in stile composable, il supporto TypeScript di prima classe e l'assenza del boilerplate di Vuex la rendono la scelta consigliata. Sapere quando ricorrere ad essa (vs props/inject) quando lo stato è veramente globale, e usare `storeToRefs` per preservare la reattività sulla destrutturazione, è il nucleo del suo utilizzo corretto.