Trwałość danych Pinia i devtools
pinia-plugin-persistedstate, zapisywanie tylko wybranych pól oraz funkcja podróży w czasie w devtools Pinia.
Trwałość danych Pinia i devtools to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Utrwalanie stanu store’a
Domyślnie stan Pinia jest tracony po ponownym załadowaniu strony. Aby go zachować, należy użyć wtyczki pinia-plugin-persistedstate, która synchronizuje stan z localStorage lub sessionStorage.
Instalowanie wtyczki
Wtyczkę należy zarejestrować raz w instancji Pinia. Następnie każdy store może opcjonalnie ją włączyć.
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)Włączanie utrwalania w store’ze
Należy ustawić persist: true w opcjach store’a. Od tej chwili cały stan będzie automatycznie zapisywany i przywracany.
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
persist: true
})Wybór pamięci
Opcja storage określa miejsce zapisu. Należy użyć sessionStorage w przypadku danych, które powinny zostać usunięte po zamknięciu karty.
persist: {
storage: sessionStorage
}Utrwalanie tylko wybranych pól
Opcja paths ogranicza zakres kluczy stanu, które są zapisywane. To idealne rozwiązanie, gdy chcą Państwo zachować token, ale nie tymczasowe flagi interfejsu.
persist: {
paths: ['token', 'name'] // 'isLoading' not persisted
}Serializacja stanu store’a
Utrwalanie działa przez serializowanie stanu do formatu JSON. Wartości muszą być bezpieczne dla JSON — zwykłe obiekty, tablice, ciągi znaków i liczby. Funkcje, obiekty Map oraz instancje klas wymagają własnego serializatora.
persist: {
serializer: {
serialize: JSON.stringify,
deserialize: JSON.parse
}
}Narzędzia deweloperskie Pinia
Po zainstalowaniu Vue Devtools Pinia dodaje dedykowany panel. Mogą Państwo sprawdzać każdy store, obserwować zmiany stanu na żywo i bezpośrednio edytować wartości.
Debugowanie z cofaniem w czasie
Każda akcja pojawia się na osi czasu narzędzi deweloperskich. Można użyć funkcji cofania w czasie: przejść do wcześniejszego stanu, aby odtworzyć błąd, a następnie ponownie przejść do przodu.
SSR i nawadnianie store’a
Podczas renderowania po stronie serwera serwer wypełnia store, a następnie klient musi wykonać nawodnienie przy użyciu tych samych danych, aby znaczniki były zgodne. Niezgodny stan powoduje ostrzeżenia dotyczące nawadniania.
Pinia z Nuxt
Moduł @pinia/nuxt integruje Pinia z Nuxt i automatycznie obsługuje nawadnianie SSR. Stan wypełniony podczas renderowania na serwerze jest serializowany na stronie i przywracany po stronie klienta.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/nuxt']
})Łączenie utrwalania z SSR
Należy zachować ostrożność: localStorage nie istnieje na serwerze. Wtyczki utrwalania wykrywają ten fakt i uruchamiają się wyłącznie po stronie klienta, dlatego nawadnianie SSR korzysta ze stanu serwera, a warstwy utrwalania są nakładane później.
Szybki test
Proszę sprawdzić wiedzę na temat utrwalania stanu i narzędzi deweloperskich.
Podsumowanie
Nauczyli się Państwo korzystać z utrwalania stanu i narzędzi:
- pinia-plugin-persistedstate zapisuje stan w pamięci local/session storage.
- Opcje storage i paths określają miejsce oraz zakres zapisywanych danych.
- Stan jest serializowany do JSON, dlatego wartości muszą być bezpieczne dla JSON.
- Narzędzia deweloperskie oferują podgląd na żywo i cofanie w czasie, a @pinia/nuxt obsługuje nawadnianie SSR.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Trwałość danych Pinia i devtools” jest bezpłatna?
Tak — pełny tekst „Trwałość danych Pinia i devtools” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Trwałość danych Pinia i devtools”?
pinia-plugin-persistedstate, zapisywanie tylko wybranych pól oraz funkcja podróży w czasie w devtools Pinia. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Trwałość danych Pinia i devtools”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Pinia czy Vuex: dlaczego warto przejść
- defineStore: stan, gettery i akcje
- Komponowanie store i dostęp między store
- Trwałość danych Pinia i devtools