Pinia per Vue: defineStore e storeToRefs
Definire uno store Pinia con defineStore, accedervi nei componenti e usare storeToRefs per mantenere la reattività durante la destrutturazione dello stato.
Pinia per Vue: defineStore e storeToRefs è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cos'è Pinia?
Pinia è la libreria ufficiale per la gestione dello stato in Vue 3. Sostituisce Vuex con un'API più semplice, type-safe e integrata con DevTools, che ricorda la Composition API.
Installare Pinia
Installi e registri il plugin Pinia nell'app Vue.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');defineStore — Stile Composition API
defineStore crea uno store. Lo stile Composition API usa direttamente ref, computed e funzioni, proprio come un composable.
// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});defineStore — Stile Options
Lo stile Options rispecchia la Options API di Vue: state() per i dati reattivi, getters (come computed) e actions (come methods).
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubled: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
async fetchAndSet(id: string) {
this.count = await fetchCount(id);
}
}
});Usare uno store in un componente
Chiami l'hook dello store all'interno di setup(). Lo store è un oggetto reattivo: può leggere lo stato e chiamare direttamente le actions.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs — Destrutturazione sicura
La destrutturazione diretta di uno store fa perdere la reattività a stato e getters, che diventano valori semplici. Usi storeToRefs() per destrutturare mantenendo la reattività.
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// Actions can be destructured normally (they're functions):
const { increment } = store;
// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);$patch — Aggiornamenti in batch
store.$patch() applica più modifiche allo stato come un'unica operazione. È utile per raggruppare aggiornamenti correlati.
store.$patch({
count: 10,
name: 'Updated'
});
// Or with a function for complex logic:
store.$patch(state => {
state.items.push(newItem);
state.total += newItem.price;
});$subscribe — Osservare le modifiche dello store
store.$subscribe(callback) reagisce a qualsiasi mutazione dello store, in modo simile a watch di Vue, ma sull'intero store.
Plugin di Pinia
I plugin di Pinia estendono ogni store. Usi comuni: rendere persistente lo stato in localStorage, aggiungere registrazioni di debug o iniettare servizi.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);Pinia DevTools
Pinia si integra con Vue DevTools. È possibile ispezionare lo stato dello store, vedere quali azioni sono state chiamate e spostarsi avanti e indietro tra gli snapshot dello stato.
Store multipli
Crei uno store per ogni dominio (useAuthStore, useCartStore, useNotificationStore). Gli store possono importarsi e utilizzarsi a vicenda. La struttura piatta di Pinia (senza moduli annidati) rende tutto questo semplice.
Verifica rapida
Perché dovrebbe utilizzare storeToRefs() quando destruttura uno store Pinia?
Riepilogo: Pinia
defineStore crea gli store. È possibile utilizzare lo stile Composition API o Options API. Si accede agli store con l'hook useXxxStore(). Utilizzi storeToRefs() per la destrutturazione reattiva. Utilizzi $patch() per aggiornamenti raggruppati. Utilizzi i plugin per la persistenza e altre estensioni. Integrazione con DevTools. Uno store per ogni dominio — nessun modulo annidato in stile Vuex.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Pinia per Vue: defineStore e storeToRefs» è gratuita?
Sì — il testo completo di «Pinia per Vue: defineStore e storeToRefs» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Pinia per Vue: defineStore e storeToRefs»?
Definire uno store Pinia con defineStore, accedervi nei componenti e usare storeToRefs per mantenere la reattività durante la destrutturazione dello stato. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Pinia per Vue: defineStore e storeToRefs»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Redux Toolkit: createSlice e configureStore
- Zustand per lo stato React leggero
- Pinia per Vue: defineStore e storeToRefs
- Quando usare lo stato globale o locale