0Pricing
Vue Academy · Lezione

Pinia vs Vuex: perché effettuare il passaggio

Nessuna mutation, inferenza TypeScript, supporto dei devtools, API più semplice, modularità predefinita.

Pinia vs Vuex: perché effettuare il passaggio è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Perché Pinia ha sostituito Vuex

Pinia è la libreria ufficiale per la gestione dello stato in Vue 3, consigliata al posto di Vuex. Mantiene i punti di forza di Vuex, ma elimina il codice ripetitivo e gli aspetti che complicavano l'uso con TypeScript.

Niente più mutation

Vuex richiedeva le mutations come unico modo per modificare lo stato. Pinia le elimina completamente: le actions modificano direttamente lo stato. Meno formalità, meno file e lo stesso tracciamento nei devtools.

// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
  increment() {
    this.count++ // direct, no commit needed
  }
}

Inferenza di TypeScript integrata

In Vuex, definire i tipi dello store era complicato e richiedeva wrapper complessi. Pinia deduce automaticamente i tipi da state, getters e actions, senza un ulteriore livello di tipizzazione.

const store = useCounterStore()
store.count       // inferred as number
store.doubled     // inferred from getter
store.increment() // fully typed action

Modulare per progettazione

Vuex usava un singolo store con modules annidati e i problemi legati al namespacing. Pinia è modulare per sua natura: un file per ogni store, ciascuno creato con il proprio defineStore. Non è necessaria alcuna registrazione centrale.

// stores/counter.js
export const useCounterStore = defineStore(...)

// stores/user.js
export const useUserStore = defineStore(...)

Nessun namespacing necessario

Poiché ogni store è indipendente e viene importato dove serve, non c'è alcun namespace globale da gestire. È sufficiente importare lo store desiderato e chiamarlo come una funzione.

import { useUserStore } from '@/stores/user'
const user = useUserStore()

Supporto per i devtools

Pinia si integra con Vue Devtools proprio come faceva Vuex. Offre una timeline delle actions, l'ispezione dello stato e il debugging con time travel, senza dover scrivere mutation.

Bundle più piccolo

Pinia è circa 1 KB più piccolo di Vuex e supporta il tree shaking. Gli store che non vengono mai importati non sono inclusi nel bundle finale.

API più semplice

Non c'è codice ripetitivo basato su mapState, mapGetters e mapActions. Chiami il composable dello store all'interno di setup e usi direttamente l'oggetto restituito.

const counter = useCounterStore()
// access state, getters, and actions on one object

Compatibile con entrambe le API

Pinia supporta l'Options API e la Composition API. I due stili per scrivere uno store sono l'option store (un oggetto) e il setup store (una funzione), che verranno trattati più avanti nel corso.

Installare Pinia

Aggiunga Pinia all'app creando l'istanza e registrandola come plugin. Da quel momento, qualsiasi componente potrà usare qualsiasi store.

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(createPinia()).mount('#app')

Quando scegliere Pinia

Usi Pinia quando lo stato deve essere condiviso tra molti componenti, mantenuto durante i cambi di route o ispezionato nei devtools. Per lo stato locale a un singolo componente, un semplice ref rimane la soluzione più semplice.

Verifica rapida

Verifichi di aver compreso perché Pinia ha sostituito Vuex.

Riepilogo

Pinia è la scelta moderna per la gestione dello stato in Vue 3:

  • Niente mutation: le actions modificano direttamente lo stato.
  • Inferenza automatica dei tipi TypeScript, senza wrapper.
  • Struttura modulare: uno store per file, senza namespacing.
  • Supporto completo per i devtools e un bundle più piccolo di circa 1 KB.

Domande Frequenti

La lezione «Pinia vs Vuex: perché effettuare il passaggio» è gratuita?

Sì — il testo completo di «Pinia vs Vuex: perché effettuare il passaggio» è 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Pinia vs Vuex: perché effettuare il passaggio»?

Nessuna mutation, inferenza TypeScript, supporto dei devtools, API più semplice, modularità predefinita. Eserciti Vue 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 Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue 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 1 di 4.

Quanto tempo richiede la lezione «Pinia vs Vuex: perché effettuare il passaggio»?

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 Vue Academy?

Sì. Ogni lezione Vue 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

  1. Pinia vs Vuex: perché effettuare il passaggio
  2. defineStore: stato, getter, action
  3. Composizione degli store e accesso tra store
  4. Persistenza e devtools di Pinia
← Torna a Vue Academy