Persistens og devtools i Pinia
pinia-plugin-persistedstate, lagring av bare bestemte felter og tidsreise i Pinia-devtools.
Persistens og devtools i Pinia er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Vedvarende lagring av store-tilstand
Som standard går Pinia-tilstanden tapt når siden lastes inn på nytt. Bruk plugin-modulen pinia-plugin-persistedstate for å beholde den. Den synkroniserer tilstanden med localStorage eller sessionStorage.
Installere plugin-modulen
Registrer plugin-modulen på Pinia-instansen én gang. Deretter kan hver store velge å aktivere den.
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)Aktivere vedvarende lagring for en store
Sett persist: true i store-alternativene. Nå lagres og gjenopprettes hele tilstanden automatisk.
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
persist: true
})Velge lagring
Alternativet storage velger hvor dataene skal lagres. Bruk sessionStorage for data som skal slettes når fanen lukkes.
persist: {
storage: sessionStorage
}Lagre bare enkelte felter
Alternativet paths begrenser hvilke state-nøkler som lagres. Dette passer godt når De vil beholde et token, men ikke midlertidige UI-flagg.
persist: {
paths: ['token', 'name'] // 'isLoading' not persisted
}Serialisering av stores
Vedvarende lagring fungerer ved å serialisere state til JSON. Verdiene må være JSON-sikre — enkle objekter, arrayer og strenger og tall. Funksjoner, Maps og klasseinstanser krever en egendefinert serialiserer.
persist: {
serializer: {
serialize: JSON.stringify,
deserialize: JSON.parse
}
}Pinia Devtools
Når Vue Devtools er installert, legger Pinia til et eget panel. De kan inspisere hver store, følge tilstandsendringer i sanntid og redigere verdier direkte.
Feilsøking med tidsreise
Hver action vises på tidslinjen i devtools. De kan reise i tiden: gå tilbake til en tidligere state for å gjenskape en feil og deretter gå fremover igjen.
SSR og hydrering av stores
Ved gjengivelse på serversiden fyller serveren store-en, og klienten må deretter hydrere med de samme dataene slik at markeringen samsvarer. Ulik state fører til advarsler om hydrering.
Pinia med Nuxt
Modulen @pinia/nuxt kobler Pinia til Nuxt og håndterer SSR-hydrering automatisk. State som fylles ut under gjengivelsen på serveren, serialiseres inn i siden og gjenopprettes på klienten.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/nuxt']
})Kombinere vedvarende lagring med SSR
Vær forsiktig: localStorage finnes ikke på serveren. Plugin-moduler for vedvarende lagring oppdager dette og kjører bare på klienten, slik at SSR-hydreringen bruker state fra serveren før lagringslaget legges til.
Kort sjekk
Test kunnskapen om vedvarende lagring og devtools.
Oppsummering
De har lært om vedvarende lagring og verktøy:
- pinia-plugin-persistedstate lagrer state i lokal lagring eller øktlagring.
- Alternativene storage og paths styrer hvor og hva som lagres.
- State serialiseres til JSON, så verdiene må være JSON-sikre.
- Devtools tilbyr inspeksjon i sanntid og tidsreise; @pinia/nuxt håndterer SSR-hydrering.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Persistens og devtools i Pinia» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Persistens og devtools i Pinia», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Persistens og devtools i Pinia»?
pinia-plugin-persistedstate, lagring av bare bestemte felter og tidsreise i Pinia-devtools. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Persistens og devtools i Pinia»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Pinia vs Vuex: Hvorfor bytte
- defineStore: State, getters og actions
- Komponering av stores og tilgang på tvers av stores
- Persistens og devtools i Pinia