provide/inject একটি পূর্বপুরুষ কম্পোনেন্ট থেকে যেকোনো বংশধর কম্পোনেন্টে ডেটা সরবরাহ করতে দেয়, তা যত গভীরই হোক না কেন, প্রতিটি মধ্যবর্তী কম্পোনেন্টের মাধ্যমে props পাস না করে। এটি prop drilling সমস্যার সমাধান করে।
App → Layout → Sidebar → Menu → MenuItem
যদি শুধুমাত্র MenuItem এর theme প্রয়োজন হয়, তবে এটি Layout, Sidebar, এবং Menu এর মাধ্যমে prop হিসাবে পাস করা (যারা এটি ব্যবহার করে না) ক্লান্তিকর এবং বিরক্তিকর। provide/inject মধ্যের অংশ এড়িয়ে যায়।
<!-- 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
প্রতিক্রিয়াশীল অবজেক্ট (the ref, এর .value নয়) সরবরাহ করুন যাতে যখন এটি পরিবর্তিত হয়, সমস্ত ইনজেক্ট করা কম্পোনেন্ট আপডেট হয়।
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
provide/inject ব্যবহার করুন একটি সাবট্রির মধ্যে নির্ভরতা-ইনজেকশনের জন্য; যখন state সত্যিকারের গ্লোবাল বা অ্যাপের সম্পর্কহীন অংশগুলি জুড়ে শেয়ার করা হয় তখন Pinia এর জন্য যান।
provide/inject prop drilling দূর করে যে ডেটা অনেক নেস্টেড কম্পোনেন্ট শেয়ার করে (থিম, লোকেল, ফর্ম/context, প্লাগইন সেবা)।
প্রতিক্রিয়াশীল মান সরবরাহ করা (যাতে আপডেটগুলি প্রচার হয়), ডিফল্ট/Symbol কী ব্যবহার করা, এবং এটিকে গ্লোবাল state (Pinia) থেকে আলাদা করা জেনে থাকা আপনাকে গভীর কম্পোনেন্ট ট্রির মধ্যে শেয়ার করা context পরিষ্কারভাবে পাস করতে দেয়।