Kekekalan Pinia dan DevTools
pinia-plugin-persistedstate, mengekalkan medan tertentu sahaja, ciri jelajah masa DevTools Pinia.
Kekekalan Pinia dan DevTools ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.
Mengekalkan Keadaan Stor
Secara lalai, keadaan Pinia hilang apabila halaman dimuat semula. Untuk mengekalkannya, gunakan pemalam pinia-plugin-persistedstate, yang menyegerakkan keadaan dengan localStorage atau sessionStorage.
Memasang Pemalam
Daftarkan pemalam pada tika Pinia sekali sahaja. Selepas itu, setiap stor boleh memilih untuk mengaktifkannya.
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)Mendayakan Pengekalan pada Stor
Tetapkan persist: true dalam pilihan stor. Kini keseluruhan keadaan disimpan dan dipulihkan secara automatik.
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
persist: true
})Memilih Storan
Pilihan storage menentukan lokasi penyimpanan. Gunakan sessionStorage untuk data yang perlu dipadamkan apabila tab ditutup.
persist: {
storage: sessionStorage
}Mengekalkan Hanya Sesetengah Medan
Pilihan paths mengehadkan kunci keadaan yang disimpan. Pilihan ini sesuai untuk mengekalkan token tetapi tidak mengekalkan bendera antara muka pengguna yang sementara.
persist: {
paths: ['token', 'name'] // 'isLoading' not persisted
}Penyirian Stor
Pengekalan berfungsi dengan menyirikan keadaan kepada JSON. Nilai mestilah selamat untuk JSON — objek biasa, tatasusunan dan rentetan. Fungsi, Map dan tika kelas memerlukan penyiri tersuai.
persist: {
serializer: {
serialize: JSON.stringify,
deserialize: JSON.parse
}
}Alat Pembangun Pinia
Dengan Vue Devtools dipasang, Pinia menambah panel khusus. Anda boleh memeriksa setiap stor, memerhatikan perubahan keadaan secara langsung dan mengedit nilai secara terus.
Penyahpepijatan Merentas Masa
Setiap tindakan dipaparkan pada garis masa alat pembangun. Anda boleh merentas masa: kembali ke keadaan sebelumnya untuk menghasilkan semula pepijat, kemudian bergerak ke hadapan semula.
SSR dan Penghidratan Stor
Dalam pemaparan sebelah pelayan, pelayan mengisi stor, kemudian klien mesti menghidrat dengan data yang sama supaya penanda sepadan. Keadaan yang tidak sepadan menyebabkan amaran penghidratan.
Pinia dengan Nuxt
Modul @pinia/nuxt menghubungkan Pinia dengan Nuxt dan mengendalikan penghidratan SSR secara automatik. Keadaan yang diisi semasa pemaparan pelayan disirikan ke dalam halaman dan dipulihkan pada klien.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/nuxt']
})Menggabungkan Pengekalan dengan SSR
Berhati-hati: localStorage tidak wujud pada pelayan. Pemalam pengekalan mengesan perkara ini dan hanya berjalan pada klien, jadi penghidratan SSR menggunakan keadaan pelayan sebelum lapisan pengekalan digunakan.
Semakan Pantas
Uji pengetahuan anda tentang pengekalan dan alat pembangun.
Ringkasan
Anda telah mempelajari pengekalan dan alatan:
- pinia-plugin-persistedstate menyimpan keadaan dalam storan tempatan atau sesi.
- Pilihan storage dan paths mengawal lokasi serta perkara yang disimpan.
- Keadaan disirikan kepada JSON, jadi nilainya mestilah selamat untuk JSON.
- Alat pembangun menawarkan pemeriksaan langsung dan perjalanan merentas masa; @pinia/nuxt mengendalikan penghidratan SSR.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Soalan Lazim
Adakah pelajaran “Kekekalan Pinia dan DevTools” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Kekekalan Pinia dan DevTools”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Kekekalan Pinia dan DevTools”?
pinia-plugin-persistedstate, mengekalkan medan tertentu sahaja, ciri jelajah masa DevTools Pinia. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Kekekalan Pinia dan DevTools” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Pinia berbanding Vuex: Sebab Peralihan
- defineStore: Keadaan, Pengambil, Tindakan
- Menggabungkan Stor dan Akses Rentas Stor
- Kekekalan Pinia dan DevTools