`provide` ve `inject` ne için kullanılır?

Question

Accepted Answer

`provide`/`inject`, **bir ata bileşenin herhangi bir alt bileşene veri sağlamasına** izin verir, ne kadar derinse desiniz, ara bileşenlerin her biri aracılığıyla props geçirmeden. **prop drilling** sorununu çözerler. ## Sorun: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` Yalnızca `MenuItem` için `theme` gerekiyorsa, bunu `Layout`, `Sidebar` ve `Menu` (kullanmayan) aracılığıyla prop olarak geçirmek zahmetli ve gürültülüdür. `provide`/`inject` ortayı atlar. ## Bir ata bileşende sağlama ```vue ``` ## Herhangi bir alt bileşende enjeksyon ```vue ``` ## Reaktif tutun ```js // ✅ provide a ref/reactive so descendants see updates provide("theme", theme); // theme is a ref → reactive // ❌ provide("theme", theme.value) → passes a snapshot, not reactive ``` **reaktif** nesneyi sağlayın (`ref`, `.value` değil) böylece değiştiğinde, tüm enjekte eden bileşenler güncellenir. ## Kütüphanelerde Symbol anahtarı kullanın ```js import { themeKey } from "./keys"; // export const themeKey = Symbol() provide(themeKey, theme); // avoids string-key collisions ``` ## provide/inject vs Pinia ```text provide/inject → pass data down a specific subtree (theme, form context, a service) Pinia → global, app-wide shared state (user, cart) usable anywhere ``` `provide`/`inject`'i **bir alt ağaç içinde bağımlılık enjeksiyonu** için kullanın; durum gerçekten global veya uygulamanın ilgisiz parçalarında paylaşıldığında Pinia'ya gidin. ## Neden önemli `provide`/`inject`, birçok iç içe geçmiş bileşenin paylaştığı veri (temalar, yerel ayarlar, form/bağlam, eklenti hizmetleri) için prop drilling'i ortadan kaldırır. Reaktif değerleri nasıl sağlayacağını (güncellemelerin yayılması için), varsayılan/Symbol anahtarlarını kullanmayı ve bunu global durumdan (Pinia) ayırt etmeyi bilmek, paylaşılan bağlamı derin bileşen ağaçlarında temiz bir şekilde geçirmenizi sağlar.