provide/inject antavat esi-isän komponentille mahdollisuuden toimittaa dataa mille tahansa jälkeläiskomponentille, riippumatta syvyydestä, ilman propsien välittämistä jokaisen välikomponentin kautta. Ne ratkaisevat prop drilling -ongelman.
App → Layout → Sidebar → Menu → MenuItem
Jos vain MenuItem tarvitsee theme:n, sen välittäminen propiksi Layout:n, Sidebar:n ja Menu:n kautta (jotka eivät sitä käytä) on tylsää ja häiritsevää. provide/inject ohittavat välimatkan.
<!-- 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
Tarjoa reaktiivinen objekti (the ref, ei sen .value) niin, että kaikki injektaavat komponentit päivittyvät kun se muuttuu.
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
Käytä provide/inject:ia riippuvuuden injektointiin alipuussa; valitse Pinia kun tila on todella globaali tai jaettu sovelluksen riippumattomien osien kesken.
provide/inject poistavat prop drillingin datalle, jonka monet sisäkkäiset komponentit jakavat (teemat, lokaali, lomakkeet/konteksti, plugin-palvelut).
Tietäen kuinka tarjota reaktiivisia arvoja (jotta päivitykset leviävät), käyttää oletusksia/Symbol-avaimia, ja erottaa ne globaalista tilasta (Pinia), voit välittää jaetun kontekstin puhtaasti syvien komponenttipuiden läpi.