provide/inject lader en komponent fra forfader levere data til enhver efterkommer, uanset hvor dybt, uden at skulle videregive props gennem hver mellemliggende komponent. De løser prop drilling-problemet.
App → Layout → Sidebar → Menu → MenuItem
Hvis kun MenuItem har brug for theme, er det kedligt og urent at skulle videregive det som en prop gennem Layout, Sidebar og Menu (som ikke bruger det). provide/inject springer mellemleddet over.
<!-- 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
Lever det reaktive objekt (the ref, ikke dets .value) så alle injicerende komponenter opdateres når det ændres.
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
Brug provide/inject til dependency-injection inden for et undertræ; grib efter Pinia når tilstand er virkelig global eller delt på tværs af ikke-relaterede dele af appen.
provide/inject eliminerer prop drilling for data, som mange indlejrede komponenter deler (temaer, sproget, formularer/kontekst, plugin-tjenester).
At vide at skulle levere reaktive værdier (så opdateringer spredes), bruge standard/Symbol-nøgler, og skelne det fra globale tilstand (Pinia) lader dig videregive delt kontekst rent gennem dybe komponenttræer.