Pinia-Persistenz und Devtools
pinia-plugin-persistedstate, nur bestimmte Felder persistieren und Zeitreisen mit den Pinia-Devtools
Pinia-Persistenz und Devtools ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Persistenz des Store-Zustands
Standardmäßig geht der Pinia-State beim Neuladen der Seite verloren. Verwenden Sie zum Beibehalten das Plugin pinia-plugin-persistedstate, das den State mit localStorage oder sessionStorage synchronisiert.
Plugin installieren
Registrieren Sie das Plugin einmal auf der Pinia-Instanz. Danach kann jeder Store die Persistenz aktivieren.
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)Persistenz für einen Store aktivieren
Setzen Sie persist: true in den Store-Optionen. Nun wird der gesamte State automatisch gespeichert und wiederhergestellt.
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
persist: true
})Speicher auswählen
Die Option storage legt fest, wo gespeichert wird. Verwenden Sie sessionStorage für Daten, die beim Schließen des Tabs gelöscht werden sollen.
persist: {
storage: sessionStorage
}Nur einige Felder persistieren
Die Option paths begrenzt, welche State-Schlüssel gespeichert werden. Das ist ideal, um ein Token beizubehalten, aber flüchtige UI-Flags nicht zu speichern.
persist: {
paths: ['token', 'name'] // 'isLoading' not persisted
}Serialisierung des Stores
Die Persistenz funktioniert, indem der State in JSON serialisiert wird. Werte müssen JSON-sicher sein – einfache Objekte, Arrays, Zeichenfolgen und Zahlen. Für Funktionen, Maps und Klasseninstanzen benötigen Sie einen benutzerdefinierten Serializer.
persist: {
serializer: {
serialize: JSON.stringify,
deserialize: JSON.parse
}
}Pinia-Devtools
Wenn Vue Devtools installiert sind, fügt Pinia ein eigenes Panel hinzu. Sie können jeden Store untersuchen, Zustandsänderungen live verfolgen und Werte direkt bearbeiten.
Time-Travel-Debugging
Jede Action erscheint in der Devtools-Zeitleiste. Sie können eine Zeitreise durchführen: Springen Sie zu einem vorherigen State zurück, um einen Fehler zu reproduzieren, und gehen Sie anschließend wieder vorwärts.
SSR und Store-Hydration
Beim serverseitigen Rendering befüllt der Server den Store. Anschließend muss der Client mit denselben Daten hydratisieren, damit das Markup übereinstimmt. Ein nicht übereinstimmender State führt zu Hydration-Warnungen.
Pinia mit Nuxt
Das Modul @pinia/nuxt bindet Pinia in Nuxt ein und übernimmt die SSR-Hydration automatisch. Der während des Server-Renderings befüllte State wird in die Seite serialisiert und auf dem Client wiederhergestellt.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/nuxt']
})Persistenz mit SSR kombinieren
Seien Sie vorsichtig: localStorage ist auf dem Server nicht vorhanden. Persistenz-Plugins erkennen das und laufen nur clientseitig. Daher verwendet die SSR-Hydration den Server-State, anschließend wird die Persistenz angewendet.
Kurzer Test
Testen Sie Ihr Wissen über Persistenz und Devtools.
Zusammenfassung
Sie haben Persistenz und Werkzeuge kennengelernt:
- pinia-plugin-persistedstate speichert den State im Local- oder Session-Storage.
- Die Optionen storage und paths steuern, wo und was gespeichert wird.
- Der State wird in JSON serialisiert, daher müssen die Werte JSON-sicher sein.
- Devtools ermöglichen die Live-Inspektion und Zeitreisen; @pinia/nuxt übernimmt die SSR-Hydration.
Häufig gestellte Fragen
Ist die Lektion „Pinia-Persistenz und Devtools“ kostenlos?
Ja — der vollständige Text von „Pinia-Persistenz und Devtools“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Pinia-Persistenz und Devtools“?
pinia-plugin-persistedstate, nur bestimmte Felder persistieren und Zeitreisen mit den Pinia-Devtools Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Pinia-Persistenz und Devtools“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Pinia vs. Vuex: Gründe für den Wechsel
- defineStore: State, Getter und Actions
- Stores kombinieren und storeübergreifend zugreifen
- Pinia-Persistenz und Devtools