provide/inject jippermettu lil komponenti anteċedent jprovdi data lil kwalunkwe dixxendenti, minkejja kemm profond, mingħajr ma tgħaddi props minn kull komponenti intermedja. Jsolvu l-prop drilling.
App → Layout → Sidebar → Menu → MenuItem
Ikken biss MenuItem jgħodd il-theme, tgħaddiha bħala prop permezz ta' Layout, Sidebar, u Menu (li ma jusuha) huwa mmeli u ħamalli. provide/inject jiċċappaw il-nofs.
<!-- 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
Ipprovdi l-oġġett reaktiv (ref, mhux .value tiegħu) sabiex meta jinbidel, il-komponenti kollha li jinjettaw jiġu aġġornati.
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
Uża provide/inject għal injezzjoni tad-dipendenza f'subtree; oħloq Pinia meta l-istat ikun verament globali jew imqassam bejn partijiet mhux relatati tal-app.
provide/inject jeliminaw prop drilling għad-data li ħafna komponenti nidda jaqsmu (temi, lokal, forma/kontwest, servizzi plugin).
Ilim kif tipprovdi valuri reaktivi (sabiex l-aġġornamenti jintixrqu), tuża ċjavi default/Symbol, u tbiddel minn stat globali (Pinia) jippermettilek tgħaddi kontwest imqassum b'mod net permezz ta' siġar ta' komponenti profonda.