Store'ları Birleştirme ve Store'lar Arası Erişim
Bir store'u başka bir store içinde kullanma, store birleştirme kalıpları ve döngüsel bağımlılıklardan kaçınma.
Store'ları Birleştirme ve Store'lar Arası Erişim, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. 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.
Store'lar Diğer Store'ları Kullanabilir
Gerçek uygulamalarda birbirine ihtiyaç duyan birden fazla store bulunur. Bir sepet store'u, geçerli kullanıcıyı öğrenmek için kimlik doğrulama store'una ihtiyaç duyabilir. Pinia, store'lar arası erişimi kolaylaştırır.
Bir Eylemin İçinde Store Çağırma
Bir eylemin içinde diğer store'un birleştirilebilir işlevini çağırmanız yeterlidir. Eylemler, Pinia etkinleştirildikten sonra çalıştığından bu güvenlidir.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})Kurulum Store'u Sözdizimi
Seçenekler nesnesinin yanı sıra defineStore, bir kurulum işlevi de kabul eder. Bu, bileşen kurulumuna benzer: ref'leri ve hesaplanmış değerleri bildirir, ardından bunları döndürürsünüz.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})Ref'ler Olarak Durum
Bir kurulum store'unda döndürdüğünüz her ref veya reactive, durum olur. Temel değerler için ref, nesneler için reactive kullanın.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Hesaplanmış Değerler Olarak Erişimciler
Döndürülen bir computed, bir erişimci görevi görür. Tıpkı seçenek store'u erişimcileri gibi önbelleğe alınır ve reaktiftir.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})İşlevler Olarak Eylemler
Döndürülen bir işlev, bir eylem olur. .value kullanarak ref'leri doğrudan okuyabilir ve yazabilir.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Ref'leri ve Hesaplanmış Değerleri Döndürme
Kurulum store'ları için temel kural şudur: dışa açmak istediğiniz her şeyi döndürün. Döndürülmeyen her şey store içinde özel kalır.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Kurulum Store'unda Store'lar Arası Kullanım
Bir kurulum store'unda başka bir store'u üst düzeyde çağırabilir ve onu hesaplanmış değerlerde veya eylemlerde kullanabilirsiniz.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Döngüsel Bağımlılıklardan Kaçınma
Store A, store B'yi; B de A'yı içe aktarırsa döngüsel bir bağımlılıkla karşılaşabilirsiniz. Diğer store'u modülün üst düzeyinde çağırmaktan kaçının; bunun yerine ihtiyaç duyulduğu eylemin veya erişimcinin içinde çağırın.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Gecikmeli Çağrılar Neden Yardımcı Olur
Store birleştirilebilir işlevini bir işlevin içinde çağırmak, çözümlemeyi tüm modüller yüklenene kadar, yani çalışma zamanına kadar erteler. Bu, modül değerlendirilirken çökmeye neden olan içe aktarma döngüsünü kırar.
Seçenek ve Kurulum Store'ları
Her iki tarz da aynı güce sahiptir. Tanıdık, bildirime dayalı bir yapı istediğinizde seçenek store'larını; izleyiciler veya store içindeki birleştirilebilir işlevler gibi Bileşim API'sinin tüm esnekliğini istediğinizde kurulum store'larını seçin.
Hızlı Kontrol
Durum depolarını birleştirme konusundaki anlayışınızı sınayın.
Özet
Durum depolarını birleştirmeyi öğrendiniz:
- Depolar arası erişim için bir eylemin içinde başka bir depo bileşimini çağırın.
- Kurulum depolarında bir işlev kullanılır: ref değerleri durum, hesaplanan değerler alıcılar, işlevler eylemlerdir.
- Dışa açmak istediğiniz her şeyi döndürün.
- Döngüsel bağımlılıkları önlemek için depoları işlevlerin içinde gerektiğinde çağırın.
Sıkça Sorulan Sorular
“Store'ları Birleştirme ve Store'lar Arası Erişim” dersi ücretsiz mi?
Evet — “Store'ları Birleştirme ve Store'lar Arası Erişim” 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.
“Store'ları Birleştirme ve Store'lar Arası Erişim” dersinde ne öğreneceğim?
Bir store'u başka bir store içinde kullanma, store birleştirme kalıpları ve döngüsel bağımlılıklardan kaçınma. 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 3. dersidir.
“Store'ları Birleştirme ve Store'lar Arası Erişim” 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