provide/inject ermöglichen es einer Vorfahren-Komponente, Daten an jeden Nachkommen bereitzustellen, egal wie tief, ohne props durch jede Zwischenkomponente zu leiten. Sie lösen das prop drilling-Problem.
App → Layout → Sidebar → Menu → MenuItem
Wenn nur MenuItem das theme braucht, ist es mühsam und störend, es als prop durch Layout, Sidebar und Menu (die es nicht verwenden) zu leiten. provide/inject überspringen die Vermittler.
<!-- 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
Stellen Sie das reaktive Objekt bereit (the ref, nicht sein .value), damit alle injizierenden Komponenten aktualisiert werden, wenn es sich ändert.
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
Verwenden Sie provide/inject für Dependency-Injection innerhalb eines Unterbaums; greifen Sie zu Pinia, wenn der State wirklich global oder über nicht verwandte Teile der App verteilt ist.
provide/inject beseitigen prop drilling für Daten, die viele verschachtelte Komponenten gemeinsam nutzen (Themes, Sprache, Formulare/Kontext, Plugin-Services).
Zu wissen, dass reaktive Werte bereitzustellen sind (damit Updates sich ausbreiten), Standard-/Symbol-Schlüssel zu verwenden und es vom globalen State (Pinia) zu unterscheiden, ermöglicht es Ihnen, gemeinsamen Kontext sauber durch tiefe Komponentenbäume zu leiten.