provide/inject permettono a un componente antenato di fornire dati a qualsiasi discendente, indipendentemente dalla profondità, senza passare props attraverso ogni componente intermedio. Risolvono il prop drilling.
App → Layout → Sidebar → Menu → MenuItem
Se solo MenuItem ha bisogno di theme, passarlo come prop attraverso Layout, Sidebar e Menu (che non lo usano) è tedioso e rumoroso. provide/inject saltano il mezzo.
<!-- 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
Fornisci l'oggetto reattivo (il ref, non il suo .value) in modo che quando cambia, tutti i componenti che iniettano si aggiornino.
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
Usa provide/inject per l'iniezione di dipendenze all'interno di un sottoalbero; ricorri a Pinia quando lo stato è veramente globale o condiviso tra parti non correlate dell'app.
provide/inject eliminano il prop drilling per i dati che molti componenti annidati condividono (temi, locale, form/context, servizi plugin).
Sapere come fornire valori reattivi (in modo che gli aggiornamenti si propaghino), usare chiavi predefinite/Symbol e distinguerlo dallo stato globale (Pinia) ti permette di passare il contesto condiviso in modo pulito attraverso alberi di componenti profondi.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona