provide/inject huruhusu sehemu ya wazazi kutoa data kwa mtoto yeyote, haijalishi jinsi inavyokuwa kirefu, bila kutuma props kupitia sehemu ya kati. Wao kutatua prop drilling.
Tatizo: prop drilling
text
App → Layout → Sidebar → Menu → MenuItem
provide/inject huruhusu sehemu ya wazazi kutoa data kwa mtoto yeyote, haijalishi jinsi inavyokuwa kirefu, bila kutuma props kupitia sehemu ya kati. Wao kutatua prop drilling.
App → Layout → Sidebar → Menu → MenuItem
Kama MenuItem tu inayohitaji theme, kutuma kama prop kupitia Layout, Sidebar, na Menu (ambayo haitumii) ni mahitaji na kelele. provide/inject kuweza kupuuza kati.
<!-- 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
Kumtolea reactive kitu (the ref, si yake .value) ili iweze kubadilika, sehemu zote zinazojitokeza kurejea.
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
Tumia provide/inject kwa dependency-injection ndani ya subtree; chagua Pinia wakati hali ni ya pandikali au kusambazwa katika sehemu zisizohusiana za programu.
provide/inject kuondoa prop drilling kwa data ambayo sehemu nyingi za kina zinashiriki (mada, lugha, fomu/muktadha, huduma za plugin).
Kujua kumtolea thamani za reactive (hivyo sasisho huenea), kutumia thamani chaguomsingi/Ufunguo wa Symbol, na kutofautiana na hali ya pandikali (Pinia) hukuruhusu kusambaza muktadha unaoshirikiwa kwa njia safi kupitia miti ya kirefu ya sehemu.
Maktaba ya maswali ya mahojiano ya IT yenye majibu ya kina — kutoka Junior hadi Senior.
Changia