provide/inject låter en förälderkomponent leverera data till en godtycklig nedstämd komponent, oavsett hur djup den är, utan att skicka props genom varje mellankomponent. De löser prop drilling.
App → Layout → Sidebar → Menu → MenuItem
Om bara MenuItem behöver theme, är det omständligt och bullrigt att skicka det som en prop genom Layout, Sidebar och Menu (som inte använder det). provide/inject hoppar över mitten.
<!-- 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
Tillhandahåll det reaktiva objektet (the ref, inte dess .value) så att när det ändras uppdateras alla injicerande komponenter.
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
Använd provide/inject för beroendeinjektion inom ett underträd; vänd dig till Pinia när tillståndet är verkligt globalt eller delat mellan orelaterade delar av appen.
provide/inject eliminerar prop drilling för data som många kapslade komponenter delar (teman, språk, formulär/kontext, plugin-tjänster).
Att veta hur man tillhandahåller reaktiva värden (så uppdateringar sprids), använder standardvärden/Symbol-nycklar och skiljer det från globalt tillstånd (Pinia) låter dig skicka delad kontext på ett rent sätt genom djupa komponentträd.