Pentru ce sunt folosite provide și inject?

Question

Accepted Answer

`provide`/`inject` permit unui **component strămoș să furnizeze date oricărui descendent**, indiferent cât de adânc, fără a transmite props prin fiecare component intermediar. Ele rezolvă problema **prop drilling**. ## Problema: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` Dacă doar `MenuItem` are nevoie de `theme`, transmiterea acestuia ca prop prin `Layout`, `Sidebar` și `Menu` (care nu o folosesc) este anevoie și dezordonate. `provide`/`inject` sar peste mijloc. ## Providing în un strămoș ```vue ``` ## Injecting în orice descendent ```vue ``` ## Păstrează-l reactiv ```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 ``` Furnizează obiectul **reactiv** (the `ref`, nu `.value` al acestuia) astfel încât atunci când se schimbă, toate componentele care injectează se actualizează. ## Folosește o cheie Symbol în biblioteci ```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 ``` Folosește `provide`/`inject` pentru **dependency-injection în cadrul unui subarbore**; apelează la Pinia atunci când starea este cu adevărat globală sau shared în părți neînrudite ale aplicației. ## De ce conteaza `provide`/`inject` elimină prop drilling pentru datele pe care multe componente imbricate le partajează (teme, locale, formular/context, servicii de plugin). Ştiind să furnizezi valori reactive (pentru ca actualizările să se propagă), să folosești chei implicite/Symbol și să deosebești aceasta de starea globală (Pinia) îți permite să transmiți context partajat în mod curat prin arbori de componente profunzi.