Pinian persistointi ja devtools
pinia-plugin-persistedstate, vain tiettyjen kenttien persistointi ja Pinia-devtoolsin aikamatkailu
Pinian persistointi ja devtools on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Storen tilan säilyttäminen
Oletusarvoisesti Pinian tila katoaa sivun uudelleenlatauksen yhteydessä. Säilyttääksenne tilan käyttäkää pinia-plugin-persistedstate-lisäosaa, joka synkronoi tilan kohteeseen localStorage tai sessionStorage.
Lisäosan asentaminen
Rekisteröikää lisäosa Pinia-instanssiin kerran. Tämän jälkeen jokainen store voi ottaa sen käyttöön.
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)Persistoinnin ottaminen käyttöön storessa
Asettakaa storen asetuksiin persist: true. Nyt koko tila tallennetaan ja palautetaan automaattisesti.
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
persist: true
})Tallennustilan valitseminen
storage-asetus määrittää, mihin tiedot tallennetaan. Käyttäkää sessionStorage-tallennustilaa tiedoille, jotka tulee poistaa välilehden sulkeutuessa.
persist: {
storage: sessionStorage
}Vain joidenkin kenttien persistointi
paths-asetus rajoittaa tallennettavia tilan avaimia. Se sopii erinomaisesti tokenin säilyttämiseen ilman väliaikaisten käyttöliittymäilmaisimien tallentamista.
persist: {
paths: ['token', 'name'] // 'isLoading' not persisted
}Storen serialisointi
Persistointi toimii serialisoimalla tilan JSON-muotoon. Arvojen on oltava JSONin kanssa yhteensopivia — esimerkiksi tavallisia objekteja, taulukoita, merkkijonoja tai lukuja. Funktiot, Map-oliot ja luokkainstanssit tarvitsevat mukautetun serialisoijan.
persist: {
serializer: {
serialize: JSON.stringify,
deserialize: JSON.parse
}
}Pinia Devtools
Kun Vue Devtools on asennettu, Pinia lisää oman paneelin. Voitte tarkastella jokaista storea, seurata tilan muutoksia reaaliajassa ja muokata arvoja suoraan.
Aikamatkavirheenkorjaus
Jokainen action näkyy devtoolsin aikajanalla. Voitte matkata ajassa: siirtyä aiempaan tilaan virheen toistamiseksi ja jatkaa sitten taas eteenpäin.
SSR ja storen hydratointi
Palvelinpuolen renderöinnissä palvelin täyttää storen, minkä jälkeen asiakkaan on hydraatoitava sama data, jotta merkintä vastaa palvelimen tuottamaa. Eriävä tila aiheuttaa hydratointivaroituksia.
Pinia ja Nuxt
@pinia/nuxt-moduuli yhdistää Pinian Nuxtiin ja huolehtii SSR-hydratoinnista automaattisesti. Palvelinrenderöinnin aikana täytetty tila serialisoidaan sivulle ja palautetaan asiakkaalla.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/nuxt']
})Persistoinnin ja SSR:n yhdistäminen
Olkaa tarkkoja: localStorage ei ole käytettävissä palvelimella. Persistointilisäosat tunnistavat tämän ja suoritetaan vain asiakkaalla, joten SSR-hydratointi käyttää palvelimen tilaa ja persistointikerrokset lisätään vasta sen jälkeen.
Pikatesti
Testatkaa, mitä tiedätte persistoinnista ja devtoolseista.
Kertaus
Opitte persistoinnista ja työkaluista:
- pinia-plugin-persistedstate tallentaa tilan local- tai session-tallennustilaan.
- storage- ja paths-asetukset määrittävät, mihin ja mitä tallennetaan.
- Tila serialisoidaan JSON-muotoon, joten arvojen on oltava JSONin kanssa yhteensopivia.
- Devtools tarjoaa reaaliaikaisen tarkastelun ja aikamatkan; @pinia/nuxt huolehtii SSR-hydratoinnista.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Pinian persistointi ja devtools” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Pinian persistointi ja devtools”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Pinian persistointi ja devtools”?
pinia-plugin-persistedstate, vain tiettyjen kenttien persistointi ja Pinia-devtoolsin aikamatkailu Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Pinian persistointi ja devtools”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Pinia vs Vuex: miksi vaihtaa
- defineStore: tila, getterit ja actionit
- Storejen koostaminen ja storejen välinen käyttö
- Pinian persistointi ja devtools