Za što se koriste provide i inject?

Question

Accepted Answer

`provide`/`inject` omogućavaju **komponentama pretkom da pruže podatke bilo kojem potomku**, bez obzira kako daleko, bez prolaska props kroz svaku međukomponentu. Rješavaju problem **prop drilling**. ## Zašto je to važno ```text App → Layout → Sidebar → Menu → MenuItem ``` Ako samo `MenuItem` trebam `theme`, proslijeđivanje kao prop kroz `Layout`, `Sidebar` i `Menu` (koji ga ne koriste) je naporno i šumno. `provide`/`inject` preskačuju sredinu. ## Pružanje u komponentama pretkom ```vue ``` ## Injektiranje u bilo koji potomak ```vue ``` ## Drži ga reaktivnim ```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 ``` Pruži **reaktivni** objekt (the `ref`, not its `.value`) kako bi se svi injektirajući komponenti ažurirali kad se promijeni. ## Koristi Symbol ključ u knjižnicama ```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 ``` Koristi `provide`/`inject` za **dependency-injection unutar podstabla**; pribjegni Pinia kada je stanje stvarno globalno ili dijeljena kroz nesvezane dijelove aplikacije. ## Zašto je to važno `provide`/`inject` eliminira prop drilling za podatke koje mnoge ugniježđene komponente dijele (teme, locale, form/kontekst, plugin usluge). Znanje o pružanju reaktivnih vrijednosti (kako bi se ažuriranja proširila), korištenju zadanih/Symbol ključeva, i razlikovanju od globalnog stanja (Pinia) omogućava vam čistog prolaska dijeljanog konteksta kroz duboka stabla komponenti.