Bu kullanışlı alternatifi kullanarak standart kodu azaltın ve Vue uygulamalarınızı daha sürdürülebilir hale getirin.

Vue, bileşenler arasındaki veri akışını ve iletişimi yönetmenin çeşitli yollarını sunar. Bir Vue geliştiricisi olarak sık karşılaşılan bir zorluk, verileri çeşitli bileşen katmanları aracılığıyla aktardığınız, karmaşık ve daha az bakımı kolay bir kod tabanına yol açan pervane sondajıdır.

Vue, sondajı desteklemek için temiz bir çözüm olan sağlama/enjekte etme mekanizmasını sunar. Sağlayın/enjekte edin, ebeveynler ile derinlemesine iç içe geçmiş alt bileşenler arasındaki veri iletişimini yönetmeye yardımcı olun.

Pervane Delme Problemini Anlamak

Sağlama/enjekte etme çözümünü derinlemesine incelemeden önce konuyu anlamak önemlidir. Prop detaylandırması, verileri üst düzey bir ana bileşenden derinlemesine iç içe geçmiş bir alt bileşene aktarmanız gerektiğinde gerçekleşir.

Bu hiyerarşideki ara bileşenlerin, kendileri kullanmasalar bile verileri alıp aktarmaları gerekir. Bir ana bileşenden bir alt bileşene veri aktarmak için şunları yapmanız gerekir:

instagram viewer
bu verileri destek olarak Vue bileşenlerinize iletin.

Örnek olarak aşağıdaki bileşen hiyerarşisini düşünün:

  • Uygulama
    • Ebeveyn Bileşeni
      • Çocuk Bileşeni
        • GrandChild Bileşeni

Diyelim ki veriler Uygulama bileşenin ulaşması gerekiyor GrandChild Bileşeni. Bu durumda, bu bileşenlerin doğru çalışması için verilere ihtiyaç duymasalar bile, onu props kullanarak iki ara bileşenden geçirmeniz gerekir. Bu, hata ayıklamanın daha zor olduğu şişirilmiş kodlara yol açabilir.

Sağlamak/Enjekte Etmek Nedir?

Vue bu sorunu şu şekilde çözer: sağlamak/enjekte etmek Bu özellik, bir ana bileşenin, ne kadar derinlemesine yuvalanmış olursa olsun, alt bileşenlerine veri veya işlevler sağlamasına olanak tanır. Bu çözüm, veri paylaşımını basitleştirir ve kod organizasyonunu geliştirir.

Sağlayıcı Bileşeni

Bir sağlayıcı bileşeni, verileri veya yöntemleri alt öğeleriyle paylaşmayı amaçlamaktadır. Şunu kullanır: sağlamak Bu verileri çocukların kullanımına sunma seçeneği. Sağlayıcı bileşeninin bir örneğini burada bulabilirsiniz:


<template>
<div>

<ParentComponent/>
div>
template>
<scriptsetup>
import { provide } from 'vue';
import ParentComponent from './components/ParentComponent.vue';


const greeting = 'Hello from Provider';
provide('greeting', greeting);
script>

Bu kod bloğu bir sağlayıcı bileşenini gösterir, Uygulama, bu sağlar selamlama tüm alt bileşenlerine göre değişkendir. Bir değişken sağlamak için bir anahtar ayarlamanız gerekir. Anahtarı değişkenle aynı ada ayarlamak kodunuzun bakımını yapmanıza yardımcı olur.

Alt Bileşenler

Alt bileşenler, iç içe geçmiş bir yapı içindeki bileşenlerdir. Sağlanan verileri bileşen örneklerine enjekte edebilir ve kullanabilirler. İşte nasıl yapıldığı:

<scriptsetup>
import { inject } from 'vue';
const injectedData = inject('greeting');
script>

Alt bileşen, sağlanan verileri enjekte eder ve yerel olarak tanımlanmış bir değişken olarak şablonunun içinden bu verilere erişebilir.

Şimdi aşağıdaki görseli düşünün:

Bu görüntüde, başlangıç ​​noktası görevi gören bir kök bileşenle başlayan dört bileşenden oluşan bir hiyerarşiyi görebilirsiniz. Diğer bileşenler hiyerarşi içinde yer alır ve şu şekilde biter: Torun bileşen.

GrandChild bileşeni, Uygulama bileşeninin sağladığı verileri alır. Bu mekanizmanın yürürlükte olmasıyla, verilerin veri aktarımından kaçınabilirsiniz. Ebeveyn Ve Çocuk bileşenler, çünkü bu bileşenlerin düzgün çalışması için verilere ihtiyaç yoktur.

Uygulama (Küresel) Düzeyde Veri Sağlama

Vue'nun Provid/Inject özelliği ile uygulama düzeyinde veri sağlayabilirsiniz. Bu, Vue uygulamanızdaki farklı bileşenler arasında veri ve konfigürasyon paylaşımına yönelik yaygın bir kullanım durumudur.

Aşağıda uygulama düzeyinde nasıl veri sağlayabileceğinize dair bir örnek verilmiştir:

// main.js
import { createApp } from'vue'
import App from'./App.vue'


const globalConfig = {
 apiUrl: 'https://example.com/api',
 authKey: 'my-secret-key',
// Other configuration settings...
};


app.provide('globalConfig', globalConfig);
createApp(App).mount('#app')

Aşağıdakileri içeren genel bir yapılandırma nesnesi gerektiren bir uygulamanız olduğunu varsayalım: Uygulama Programlama Arayüzü (API) uç noktalar, kullanıcı kimlik doğrulama bilgileri ve diğer ayarlar.

Bunu, konfigürasyon verilerini üst düzey bileşende, genellikle de main.js dosya, diğer bileşenlerin onu enjekte etmesine ve kullanmasına izin verir:

<template>
<div>
<h1>API Settingsh1>
<p>API URL: {{ globalConfig.apiUrl }}p>
<p>Authentication Key: {{ globalConfig.authKey }}p>
div>
template>
<scriptsetup>
import { inject } from 'vue';
const globalConfig = inject('globalConfig');
script>

Yukarıdaki bileşen şunu kullanır: enjekte etmek erişmek için işlev globalYapılandırma Uygulamanın küresel düzeyde sağladığı nesne. Bu özellikleri enterpolasyon yaparak veya bağlayarak globalConfig'den herhangi bir özelliğe veya ayara erişebilirsiniz. Vue'da farklı veri bağlama teknikleri bileşen içerisinde.

Sağla ve Enjekte Etmenin Faydaları ve Kullanımları

Vue'da web uygulamaları oluştururken sağlama/enjekte etme özelliğinin bazı yararları ve önemli kullanımları aşağıda verilmiştir.

Daha Temiz ve Performansı Optimize Edilmiş Kod

Kullanma sağlamak/enjekte etmekkullanarak, ara bileşenlerin kullanmadıkları verileri aktarma ihtiyacını ortadan kaldırırsınız. Bu, gereksiz prop bildirimlerini azaltarak daha temiz ve bakımı daha kolay kodla sonuçlanır.

Ayrıca Vue'nun reaktivite sistemi, bileşenlerin yalnızca bağımlılıkları değiştiğinde yeniden oluşturulmasını sağlar. Sağlama/enjekte etme, verilerin verimli bir şekilde paylaşılmasına olanak tanır; bu da gereksiz yeniden oluşturma işlemlerini azaltarak performans optimizasyonlarına yol açabilir.

Geliştirilmiş Bileşen Kapsülleme

Sağla/enjekte et, daha iyi bileşen kapsüllemeyi destekler. Alt bileşenlerin yalnızca açıkça kullandıkları veriler hakkında endişelenmeleri gerekir, bu da üst bileşenlerin belirli veri yapısına olan bağımlılıklarını azaltır.

Yerelleştirilmiş tarih biçimi ayarlarına dayanan bir tarih seçici bileşenini düşünün. Bu ayarları destek olarak iletmek yerine, bunları ana bileşen içinde sağlayabilir ve yalnızca tarih seçici bileşenine enjekte edebilirsiniz. Bu, endişelerin daha net bir şekilde ayrılmasına yol açar.

Bağımlılık Enjeksiyonu

Sağlama/enjekte etme, bağımlılık enjeksiyonunun basit bir biçimi olarak hizmet edebilir ve küresel hizmetler ve ayarlar oluşturabilir; API istemcileri, uç noktalar, kullanıcı tercihleri ​​veya veri depoları, bunlara ihtiyaç duyan tüm bileşenler tarafından kolaylıkla kullanılabilir. Bu, uygulamanız genelinde tutarlı yapılandırmalar sağlar.

Provide ve Inject Kullanırken Dikkat Edilmesi Gereken Temel Noktalar

iken sağlamak/enjekte etmek Mekanizma birçok avantaj sunuyor, istenmeyen yan etkilerle karşılaşmamak için dikkatli kullanmalısınız.

  • Kullanmak sağlamak/enjekte etmek Yapılandırma veya API anahtarları gibi bir bileşen hiyerarşisinde ihtiyaç duyulan önemli verileri veya işlevleri paylaşmak için. Aşırı kullanmak, bileşen ilişkilerinizi çok karmaşık hale getirebilir.
  • Sağlayıcı bileşenin neler sağladığını ve hangi alt bileşenlerin enjekte edilmesi gerektiğini belgeleyin. Bu, özellikle ekip halinde çalışırken bileşenlerinizi anlamanıza ve korumanıza yardımcı olur.
  • Bir alt bileşenin, bir ana bileşenin enjekte ettiği bir şeyi sağladığı bağımlılık döngüleri oluşturma konusunda dikkatli olun. Bu, hatalara ve beklenmeyen davranışlara yol açacaktır.

Vue'da Durum Yönetimi için En İyi Seçeneği Sağlamak/Enjekte Etmek mi?

Sağlama/enjekte etme, bileşenler genelinde veri akışını ve durumu yönetmek için Vue'daki başka bir yararlı özelliktir. Sağlamak/enjekte etmek bazı dezavantajları da beraberinde getirir. Sağlama/enjekte etme, büyük ölçekli uygulamaların hata ayıklamasında, test edilmesinde ve bakımında zorluklara yol açabilir.

Vue uygulamanızdaki karmaşık durumları yönetmek için Vue'nun resmi durum yönetimi çerçevesi olan Pinia'yı kullanmak en iyisi olacaktır. Pinia, durum yönetimine merkezi bir depolama ve tür açısından güvenli bir yaklaşım sunarak Vue uygulama geliştirmeyi daha erişilebilir hale getirir.