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.
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.
<!-- App.vue -->
<script setup>
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme); // make `theme` available to ALL descendants
provide("toggleTheme", () => { // can provide functions too
theme.value = theme.value === "dark" ? "light" : "dark";
});
</script>
<!-- MenuItem.vue (deeply nested) -->
<script setup>
import { inject } from "vue";
const theme = inject("theme"); // get it directly — no props in between
const toggleTheme = inject("toggleTheme");
const color = inject("color", "blue"); // with a default fallback
</script>
// ✅ 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.
import { themeKey } from "./keys"; // export const themeKey = Symbol()
provide(themeKey, theme); // avoids string-key collisions
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.
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.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj