Pinia Kalıcılığı ve DevTools
pinia-plugin-persistedstate, yalnızca belirli alanları kalıcı hâle getirme ve Pinia DevTools ile zamanda gezinme.
Pinia Kalıcılığı ve DevTools, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Durum Deposunu Kalıcı Hâle Getirme
Varsayılan olarak Pinia durumu sayfa yeniden yüklendiğinde kaybolur. Durumu korumak için, durumu localStorage veya sessionStorage ile eşitleyen pinia-plugin-persistedstate eklentisini kullanın.
Eklentiyi Kurma
Eklentiyi Pinia örneğine bir kez kaydedin. Böylece her depo kalıcılığı isteğe bağlı olarak etkinleştirebilir.
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)Bir Depoda Kalıcılığı Etkinleştirme
Depo seçeneklerinde persist: true ayarını yapın. Artık tüm durum otomatik olarak kaydedilir ve geri yüklenir.
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
persist: true
})Depolama Alanını Seçme
storage seçeneği kaydetme konumunu belirler. Sekme kapatıldığında silinmesi gereken veriler için sessionStorage kullanın.
persist: {
storage: sessionStorage
}Yalnızca Bazı Alanları Kalıcı Hâle Getirme
paths seçeneği hangi durum anahtarlarının kaydedileceğini sınırlar. Bu seçenek, geçici kullanıcı arayüzü bayraklarını değil, bir belirteci korumak için idealdir.
persist: {
paths: ['token', 'name'] // 'isLoading' not persisted
}Depo Serileştirmesi
Kalıcılık, durumu JSON'a dönüştürerek çalışır. Değerler JSON ile güvenle saklanabilir olmalıdır: düz nesneler, diziler, dizeler ve sayılar. İşlevler, eşlemeler ve sınıf örnekleri için özel bir serileştirici gerekir.
persist: {
serializer: {
serialize: JSON.stringify,
deserialize: JSON.parse
}
}Pinia Geliştirme Araçları
Vue Geliştirme Araçları kurulduğunda Pinia özel bir panel ekler. Her depoyu inceleyebilir, durum değişikliklerini canlı olarak izleyebilir ve değerleri doğrudan düzenleyebilirsiniz.
Zamanda Geriye Giterek Hata Ayıklama
Her eylem geliştirme araçlarının zaman çizelgesinde görünür. Zamanda geriye gidebilirsiniz: bir hatayı yeniden oluşturmak için önceki bir duruma dönüp ardından yeniden ilerleyebilirsiniz.
SSR ve Depo Hidrasyonu
Sunucu tarafında oluşturmada sunucu depoyu doldurur, ardından istemci işaretlemenin eşleşmesi için aynı verilerle hidrasyon gerçekleştirmelidir. Eşleşmeyen durum, hidrasyon uyarılarına neden olur.
Nuxt ile Pinia
@pinia/nuxt modülü Pinia'yı Nuxt'a bağlar ve SSR hidrasyonunu otomatik olarak yönetir. Sunucu oluşturması sırasında doldurulan durum sayfaya serileştirilir ve istemcide geri yüklenir.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/nuxt']
})Kalıcılığı SSR ile Birleştirme
Dikkatli olun: localStorage sunucuda mevcut değildir. Kalıcılık eklentileri bunu algılar ve yalnızca istemci tarafında çalışır; böylece SSR hidrasyonu sunucu durumunu kullanır, kalıcılık katmanları ise sonrasında devreye girer.
Hızlı Kontrol
Kalıcılık ve geliştirme araçları konusundaki bilginizi sınayın.
Özet
Kalıcılığı ve araçları öğrendiniz:
- pinia-plugin-persistedstate, durumu yerel veya oturum depolama alanına kaydeder.
- storage ve paths seçenekleri, nelerin ve nereye kaydedileceğini denetler.
- Durum JSON'a serileştirilir; bu nedenle değerler JSON ile güvenle saklanabilir olmalıdır.
- Geliştirme araçları canlı inceleme ve zamanda geriye gitme olanağı sunar; @pinia/nuxt SSR hidrasyonunu yönetir.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“Pinia Kalıcılığı ve DevTools” dersi ücretsiz mi?
Evet — “Pinia Kalıcılığı ve DevTools” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Pinia Kalıcılığı ve DevTools” dersinde ne öğreneceğim?
pinia-plugin-persistedstate, yalnızca belirli alanları kalıcı hâle getirme ve Pinia DevTools ile zamanda gezinme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Pinia Kalıcılığı ve DevTools” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Pinia ve Vuex: Geçişin Nedeni
- defineStore: Durum, Getters ve Actions
- Store'ları Birleştirme ve Store'lar Arası Erişim
- Pinia Kalıcılığı ve DevTools