Vue Academy · Pelajaran

Persistensi Pinia dan DevTools

pinia-plugin-persistedstate, menyimpan hanya field tertentu, serta fitur perjalanan waktu pada DevTools Pinia.

Persistensi Pinia dan DevTools adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mempertahankan Status Penyimpanan

Secara bawaan, status Pinia hilang saat halaman dimuat ulang. Untuk mempertahankannya, gunakan pengaya pinia-plugin-persistedstate, yang menyinkronkan status ke localStorage atau sessionStorage.

Memasang Pengaya

Daftarkan pengaya pada instans Pinia satu kali. Setelah itu, setiap penyimpanan dapat memilih untuk mengaktifkannya.

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

Mengaktifkan Persistensi pada Penyimpanan

Setel persist: true di opsi penyimpanan. Sekarang seluruh status disimpan dan dipulihkan secara otomatis.

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

Memilih Media Penyimpanan

Opsi storage menentukan tempat penyimpanan data. Gunakan sessionStorage untuk data yang harus dihapus saat tab ditutup.

persist: {
  storage: sessionStorage
}

Mempertahankan Hanya Beberapa Bidang

Opsi paths membatasi kunci status mana yang disimpan. Opsi ini ideal untuk mempertahankan token, tetapi tidak mempertahankan penanda UI sementara.

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

Serialisasi Penyimpanan

Persistensi bekerja dengan menserialisasi status ke JSON. Nilai harus aman untuk JSON — objek biasa, larik, string, dan angka. Fungsi, Map, dan instans kelas memerlukan serializer khusus.

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

Alat Pengembang Pinia

Setelah Vue Devtools terpasang, Pinia menambahkan panel khusus. Anda dapat memeriksa setiap penyimpanan, mengamati perubahan status secara langsung, dan mengedit nilai secara langsung.

Penelusuran Waktu untuk Debugging

Setiap aksi muncul di linimasa alat pengembang. Anda dapat menelusuri waktu: kembali ke status sebelumnya untuk mereproduksi galat, lalu maju lagi selangkah demi selangkah.

SSR dan Hidrasi Penyimpanan

Dalam rendering sisi server, server mengisi penyimpanan, lalu klien harus melakukan hidrasi dengan data yang sama agar markah cocok. Status yang tidak cocok menyebabkan peringatan hidrasi.

Pinia dengan Nuxt

Modul @pinia/nuxt menghubungkan Pinia ke Nuxt dan menangani hidrasi SSR secara otomatis. Status yang diisi selama rendering server diserialisasi ke dalam halaman dan dipulihkan di klien.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Menggabungkan Persistensi dengan SSR

Berhati-hatilah: localStorage tidak tersedia di server. Pengaya persistensi mendeteksi hal ini dan hanya berjalan di sisi klien, sehingga hidrasi SSR menggunakan status server dan lapisan persistensi diterapkan setelahnya.

Uji Cepat

Uji pengetahuan Anda tentang persistensi dan alat pengembang.

Ringkasan

Anda telah mempelajari persistensi dan perkakas:

pinia-plugin-persistedstate menyimpan status ke penyimpanan lokal atau sesi.
Opsi penyimpanan dan jalur mengatur tempat serta data yang disimpan.
Status diserialisasi ke JSON, sehingga nilainya harus aman untuk JSON.
Alat pengembang menyediakan pemeriksaan langsung dan penelusuran waktu; @pinia/nuxt menangani hidrasi SSR.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Persistensi Pinia dan DevTools” gratis?

Ya — teks lengkap “Persistensi Pinia dan DevTools” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Persistensi Pinia dan DevTools”?

pinia-plugin-persistedstate, menyimpan hanya field tertentu, serta fitur perjalanan waktu pada DevTools Pinia. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Persistensi Pinia dan DevTools” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy