Persistenza e devtools di Pinia
pinia-plugin-persistedstate, persistenza di soli campi specifici, time travel nei devtools di Pinia.
Persistenza e devtools di Pinia è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Persistenza dello stato dello store
Per impostazione predefinita, lo stato di Pinia viene perso quando si ricarica la pagina. Per conservarlo, utilizzi il plugin pinia-plugin-persistedstate, che sincronizza lo stato con localStorage o sessionStorage.
Installazione del plugin
Registri il plugin sull'istanza di Pinia una sola volta. Ogni store può quindi scegliere di abilitarlo.
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)Abilitare la persistenza per uno store
Imposti persist: true nelle opzioni dello store. Ora l'intero stato viene salvato e ripristinato automaticamente.
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
persist: true
})Scelta dello storage
L'opzione storage sceglie dove salvare i dati. Utilizzi sessionStorage per i dati che devono essere eliminati quando si chiude la scheda.
persist: {
storage: sessionStorage
}Persistenza solo di alcuni campi
L'opzione paths limita le chiavi dello stato da salvare. È ideale per conservare un token, ma non i flag temporanei dell'interfaccia.
persist: {
paths: ['token', 'name'] // 'isLoading' not persisted
}Serializzazione dello store
La persistenza funziona serializzando lo stato in JSON. I valori devono essere compatibili con JSON: oggetti semplici, array, stringhe e numeri. Le funzioni, le Maps e le istanze di classe richiedono un serializzatore personalizzato.
persist: {
serializer: {
serialize: JSON.stringify,
deserialize: JSON.parse
}
}Pinia Devtools
Con Vue Devtools installato, Pinia aggiunge un pannello dedicato. Può ispezionare ogni store, osservare in tempo reale i cambiamenti dello stato e modificare direttamente i valori.
Debugging con viaggio nel tempo
Ogni azione viene visualizzata nella timeline dei devtools. Può fare un viaggio nel tempo: tornare a uno stato precedente per riprodurre un bug e poi avanzare di nuovo.
SSR e idratazione dello store
Nel rendering lato server, il server riempie lo store, quindi il client deve eseguire l'idratazione con gli stessi dati, in modo che il markup corrisponda. Uno stato diverso causa avvisi di idratazione.
Pinia con Nuxt
Il modulo @pinia/nuxt integra Pinia in Nuxt e gestisce automaticamente l'idratazione SSR. Lo stato riempito durante il rendering sul server viene serializzato nella pagina e ripristinato sul client.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/nuxt']
})Combinare la persistenza con SSR
Faccia attenzione: localStorage non esiste sul server. I plugin di persistenza lo rilevano e vengono eseguiti solo lato client, quindi l'idratazione SSR usa lo stato del server e applica la persistenza in un secondo momento.
Verifica rapida
Verifichi la Sua conoscenza della persistenza e dei devtools.
Riepilogo
Ha imparato a usare la persistenza e gli strumenti:
- pinia-plugin-persistedstate salva lo stato nello storage locale o di sessione.
- Le opzioni storage e paths controllano dove e quali dati vengono salvati.
- Lo stato viene serializzato in JSON, quindi i valori devono essere compatibili con JSON.
- I devtools offrono ispezione in tempo reale e viaggio nel tempo; @pinia/nuxt gestisce l'idratazione SSR.
Domande Frequenti
La lezione «Persistenza e devtools di Pinia» è gratuita?
Sì — il testo completo di «Persistenza e devtools di Pinia» è 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 «Persistenza e devtools di Pinia»?
pinia-plugin-persistedstate, persistenza di soli campi specifici, time travel nei devtools di Pinia. 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 4 di 4.
Quanto tempo richiede la lezione «Persistenza e devtools di Pinia»?
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
- Pinia vs Vuex: perché effettuare il passaggio
- defineStore: stato, getter, action
- Composizione degli store e accesso tra store
- Persistenza e devtools di Pinia