Kabaca:
Bileşen ağacında (component tree) yalnızca 1 seviye yukarı veya aşağı veri aktarabilen props ve olayların (events) aksine, provide ve inject, derinlemesine iç içe geçmiş bileşenlere (deeply nested components) veri ve/veya işlevler (functions) sağlanmasına olanak tanır.
Vue.js'de provide ve inject nedir?
Provide ve Inject, Vue.js'de üst bileşenlerin veri sağlamasına ve alt bileşenlerin bu verileri enjekte edip erişmesine olanak tanıyan bir çift tamamlayıcı seçenektir. Bileşen ağacında yalnızca 1 seviye yukarı veya aşağı veri aktarabilen prop'lar ve olayların aksine, provide ve inject, derinlemesine iç içe geçmiş bileşenlere veri ve/veya işlev sağlamaya izin verir. Bu, verileri bir dizi ara bileşenden geçirmeden paylaşması gereken derinlemesine iç içe geçmiş bileşenleriniz olduğunda inanılmaz derecede yararlı olabilir.
Provide ile Veri Sağlama (Providing Data with provide):
Provide kullanarak veri sağlamak için, bunu bir ana bileşen içinde, bazen App.vue'da, aynı zamanda alt öğeler içeren herhangi bir Vue bileşeninde tanımlarsınız. İşte bir örnek:
// ParentComponent.vue
<script setup>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'
provide('message', 'Hello from ParentComponent')
</script>
<template>
<div>
<child-component />
</div>
</template>
Bu örnekte, mesaj özelliği sağlayan bir ana bileşenimiz (ParentComponent) var. Ebeveynin kapsamı içindeki herhangi bir alt bileşen, bu verilere enjeksiyon kullanarak erişebilir.
Inject ile Verileri Enjekte Etme (Injecting Data with inject)
Bir ana bileşen tarafından sağlanan verilere erişmek için alt bileşendeki enjekte etme işlevini kullanırsınız. ParentComponent tarafından sağlanan mesaja şu şekilde erişebilirsiniz:
//ChildComponent.vue
<script setup>
import { inject } from 'vue
const injectedMessage = inject('message', 'This is the default message')
</script>
<template>
<div>
<p>{{ injectedMessage }}</p>
</div>
</template>
Bu alt bileşende (ChildComponent), hangi verilere erişmek istediğimizi (bu durumda ParentComponent tarafından sağlanan mesajı) belirtmek için inject işlevini kullanırız ve ardından bileşen boyunca herhangi bir yerde ona referans verebiliriz.
Provide ve Inject etmek için Kullanım Örnekleri:
- Tema veya Yapılandırma Ayarları (Theme or Configuration Settings): Vue.js uygulamanızın kök düzeyinde genel ayarlar, temalar veya yapılandırma seçenekleri sağlayabilir ve bunları ihtiyaç duyan herhangi bir bileşene enjekte edebilirsiniz.
- Kimlik Doğrulama Verileri (Authentication Data): Kullanıcı ayrıntıları veya kimlik doğrulama belirteçleri (tokens) gibi kullanıcı kimlik doğrulama bilgilerini, bunları gerektiren bileşenlerle, donanımlara aktarmadan paylaşın.
- Uluslararasılaştırma (i18n) (Internationalization (i18n)): Çeviri verilerini kök düzeyinde depolayın ve metni farklı dillerde görüntülemesi gereken bileşenlere ekleyin.
- Sıkıca bağlanmış bileşenler (Tightly coupled components): Örneğin, yalnızca <Accordian> bileşen yuvasının içinde görünen <AccordianPanel> gibi. Her zaman erişmesini istediğiniz paylaşılan verileri, destek olarak aktarmanıza gerek kalmadan enjekte edebilirsiniz.
En İyi Uygulamalar ve Hususlar (Best Practices and Considerations):
- Aşırı Kullanımdan Kaçının (Avoid Overuse): Provide ve inject kullanmak güçlü olsa da bunları aşırı kullanmayın. Bunları, aralarında sıkı bir bağlantı oluşturmadan bileşenler arasında gerçekten veri paylaşmanız gereken durumlar için ayırın.
- Açık Belgeleme (Clear Documentation): Geliştiricilerin bileşenlerin nasıl iletişim kurduğunu anlamasını kolaylaştırmak için sağladığınız ve enjekte ettiğiniz verileri belgeleyin. Bunları TypeScript ile de yazabilirsiniz, ayrıntılar için resmi belgelere bakın.
- Prop Sondajını düşünün (Consider Prop Drilling): Prop sondajı genellikle bir anti-paterndir, ancak bazı durumlarda verileri proplar aracılığıyla iletmek daha basit ve daha şeffaf bir yaklaşım olabilir. Sağlama ve enjekte etmenin özel senaryonuz için en iyi çözüm olup olmadığını değerlendirin.
Vue.js'nin provide and inject özelliği, Vue.js uygulamalarınızdaki bileşenler arasındaki iletişimi kolaylaştırmak için çok yönlü bir araçtır. Prop delmeyi (Prop Drilling) önlemek için zarif bir çözüm sunar ve derin iç içe geçmiş bileşen hiyerarşilerinde veri paylaşımını basitleştirir. En iyi uygulamaları takip ederek ve provide ile inject'i mantıklı bir şekilde kullanarak daha modüler, bakımı yapılabilir ve verimli Vue.js uygulamaları oluşturabilirsiniz.
Kaynaklar:
Ana Kaynak:
Unveiling the Magic of Provide/Inject with Vue.js - https://vueschool.io/articles/vuejs-tutorials/unveiling-the-magic-of-provide-inject-with-vue-js
Vue.js Kaynakları:
Provide / Inject - https://vuejs.org/guide/components/provide-inject.html#provide-inject
Props - https://vuejs.org/guide/components/props.html#props
Component Events - https://vuejs.org/guide/components/events.html
Türkçe Video Kaynaklar:
Provide ve Inject | Dinamik ve Asenkron Componentler | Axios ile HTTP İstekleri (Kablosuz Kedi) - https://www.youtube.com/watch?v=LLE8VfNav-s
Yabancı Video Kaynakları:
Vue Dependency Injection Simplified - https://www.youtube.com/watch?v=lFYzA3kCM90
Learn Vue 3 - Ep 22, Dependency Injection With Provide and Inject (Laracasts Jeffrey Way) - https://www.youtube.com/watch?v=PRwnRKVsBe8