Uygulama Düzeyinde Durum için Provide/Inject
Genel durum, tema ve i18n için app.provide(), basit durumlarda Pinia kullanmaktan kaçınma.
Uygulama Düzeyinde Durum için Provide/Inject, 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.
Uygulama Düzeyinde provide
Bileşen düzeyindeki provide kullanımına ek olarak, uygulama örneğinde app.provide ile de değer sağlayabilirsiniz. Bu değer uygulamadaki her bileşenin kullanımına açılır.
const app = createApp(App);
app.provide("appVersion", "1.0.0");Genel Hizmetleri Sağlama
Uygulama düzeyinde provide; bir kimlik doğrulama hizmeti, HTTP istemcisi veya günlük kaydedici gibi, uygulamanın tamamının ihtiyaç duyabileceği tekil nesneler için idealdir.
import { authService } from "./auth";
app.provide("auth", authService);Genel Bir Hizmeti Kullanma
Herhangi bir bileşen, özellik aktarımına veya ek bağlantı koduna gerek kalmadan, ağaçta nerede olursa olsun hizmeti anahtarıyla alabilir.
const auth = inject("auth");
auth.login(credentials);Genel Kullanım İçin Symbol Anahtarları
Uygulamanın tamamındaki hizmetlerde dışa aktarılan Symbol anahtarları (tercihen türü belirtilmiş olarak), kod tabanının her yerinde almayı güvenli ve keşfedilebilir tutar.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Arama Sırası
Uygulama düzeyinde ve bileşen düzeyinde sağlama işlemleri aynı anahtarı kullandığında, o bileşenin alt bileşenleri için en yakın sağlayıcı kazanır. Uygulama düzeyindeki sağlayıcı genel yedek görevi görür.
Okuma Ağırlıklı Senaryolar
Provide/inject, birçok bileşenin yalnızca paylaşılan verileri okuduğu durumlarda çok başarılıdır: theme, yerel ayar ve config gibi. Tüketicilerin yazma işlemi yapması gerekmediğinden bu yaklaşım basit ve öngörülebilir kalır.
Pinia ile Karşılaştırma
Pinia, Vue'nun resmî durum yönetimi kütüphanesidir. Geliştirici araçları, modüler durum depoları, eylemler, alıcılar ve zamanda ilerlemeli hata ayıklama sunar; bu özellikler karmaşık ve sık değiştirilen genel durum için idealdir.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });provide/inject Ne Zaman Yeterlidir
Çoğunlukla salt okunur paylaşılan değerlerde provide/inject, bir durum deposunun ek yükünü ortadan kaldırır. Yerleşik, daha hafif bir seçenektir ve theme, i18n veya alınan hizmetler için açıktır.
Pinia Ne Zaman Tercih Edilir
Durum birçok yerden değiştiriliyorsa, geliştirici araçlarına ihtiyaç duyuyorsa, kalıcı olması gerekiyorsa veya karmaşık türetilmiş veriler içeriyorsa Pinia'yı seçin. Mantığı, dağınık provide/inject çiftlerinden daha iyi merkezileştirir.
İkisini Birlikte Kullanma
Bu iki yaklaşım birbirini dışlamaz. Uygulama verileri için Pinia'yı, form veya kullanıcı arayüzü teması gibi hafif bileşen ağacı bağlamı içinse provide/inject'i kullanabilirsiniz.
provide("formContext", { register, errors });Test Hususları
Alma işlemi yapan bir bileşeni birim testiyle sınarken, bileşenin bir takma değer alması için değeri test bağlama seçeneklerindeki global.provide üzerinden sağlayın.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Kısa Kontrol
provide/inject hangi durumda Pinia'ya tercih edilir?
Özet
app.provide işlevinin genel hizmetleri her bileşene sunduğunu ve bunların herhangi bir yerden inject aracılığıyla anahtarla kullanıldığını öğrendiniz. Provide/inject, okuma ağırlıklı paylaşılan bağlamlarda öne çıkar; Pinia ise geliştirici aracı desteğine sahip, karmaşık ve sık değiştirilen genel durumlar için uygundur.
Sıkça Sorulan Sorular
“Uygulama Düzeyinde Durum için Provide/Inject” dersi ücretsiz mi?
Evet — “Uygulama Düzeyinde Durum için Provide/Inject” 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.
“Uygulama Düzeyinde Durum için Provide/Inject” dersinde ne öğreneceğim?
Genel durum, tema ve i18n için app.provide(), basit durumlarda Pinia kullanmaktan 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 4. dersidir.
“Uygulama Düzeyinde Durum için Provide/Inject” 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
- Prop Aktarma Sorunu
- Üst Bileşenlerde provide()
- Alt Bileşenlerde inject()
- Uygulama Düzeyinde Durum için Provide/Inject