Addio Vuex, benvenuta Pinia
Ricordi quanto abbiamo faticato con Vuex? Mutazioni infinite, strana sintassi commit e dispatch, e tipi TypeScript che diventavano un vero mal di testa. Sembra che il team Vue abbia ascoltato le nostre preghiere e abbia rilasciato Pinia. Non è solo un'altra libreria per la gestione dello stato, ma il successore ufficiale di Vuex che migliora significativamente la vita di uno sviluppatore frontend.
A proposito, il nome è un gioco di parole divertente. Pinia suona come la parola spagnola «piña» (ananas). I creatori paragonano uno store a un ananas: è un gruppo di fiori individuali che insieme formano un singolo frutto. Ogni store nella tua applicazione nasce da solo, ma alla fine lavorano come un'unica squadra.
Cos'è e perché ti serve
In breve, Pinia è uno store leggero per Vue che supporta completamente la Composition API. Pesa solo circa 1 KB, supporta l'hot module reloading e va d'accordo con DevTools.
La differenza principale rispetto all'approccio precedente è l'assenza di mutazioni. Ora puoi modificare lo stato direttamente nelle azioni, il che riduce significativamente la quantità di codice boilerplate. Se stai lavorando con Vue 3, Pinia è lo standard de facto. Per chi è ancora su Vue 2, c'è compatibilità all'indietro, quindi la migrazione non sarà un disastro.
Perché gli sviluppatori scelgono questo store
Ho identificato diversi punti che cambiano davvero il flusso di lavoro.
Supporto TypeScript out of the box
In Vuex, la tipizzazione spesso sembrava di usare le stampelle. In Pinia, tutto è diverso. È scritto in TypeScript, quindi l'autocompletamento funziona perfettamente. Non devi descrivere manualmente le interfacce per ogni getter o azione — la libreria capisce da sola cosa stai restituendo.
Modularità senza complessità extra
Dimentica i moduli nidificati e i percorsi complessi verso di essi. In Pinia, crei semplicemente diversi store in file diversi e li importi dove necessario. Questo rende l'architettura più pulita: ogni componente prende solo i dati di cui ha effettivamente bisogno.
Puoi connettere la libreria con solo un paio di righe di codice. È bello che funzioni benissimo con Nuxt e supporti il server-side rendering (SSR).
Come funziona nella pratica
Immagina di avere un carrello acquisti in un negozio online. Prima, avresti dovuto registrare un modulo, tenere traccia della denominazione dei percorsi e scrivere azioni che chiamano mutazioni. Con Pinia, chiami semplicemente il metodo dello store in un componente come una normale funzione.
Per recuperare i dati senza perdere la reattività, c'è un comodo helper storeToRefs. Questo ti salva quando devi destrutturare uno store senza rompere la sua connessione con lo stato.
Vale la pena passare?
Se stai iniziando un nuovo progetto Vue 3, non ci sono praticamente alternative a Pinia. È più semplice, più veloce e più moderna. Se hai un vecchio progetto Vuex, non c'è bisogno di precipitarsi, ma per le nuove funzionalità ti consiglierei di provare questo approccio.
Il progetto è mantenuto attivamente da Eduardo San Martin Morote (posva), che fa parte del core team di Vue. Questo dà la sicurezza che la libreria non scomparirà tra un mese. Inoltre, Pinia ha un'ottima documentazione e una comunità vivace.
Puoi provare il progetto in azione su StackBlitz:
Per chi è sicuramente:
- Chi è stanco della verbosità di Vuex.
- Gli appassionati di TypeScript che apprezzano un autocompletamento di qualità.
- Sviluppatori Nuxt 3, dove Pinia è la soluzione raccomandata.
Forse l'unico svantaggio — se sei abituato alla rigida struttura di Vuex con mutazioni obbligatorie, la libertà di Pinia potrebbe sembrare strana all'inizio. Ma ci si abitua velocemente alle cose buone.
Progetti correlati