provide/inject ช่วยให้ คอมโพเนนต์บรรพบุรุษสามารถจ่ายข้อมูลไปยังคอมโพเนนต์ลูกใด ๆ ไม่ว่าจะลึกแค่ไหน โดยไม่ต้องส่ง props ผ่านคอมโพเนนต์ระดับกลางทุกตัว พวกมัน แก้ปัญหา prop drilling
App → Layout → Sidebar → Menu → MenuItem
หากเฉพาะ ที่ต้องการ การส่งเป็น prop ผ่าน , , และ (ที่ไม่ใช้มัน) ก็จะเบื่อและซ้ำซ้อน / ข้ามไปตรงกลาง
MenuItemthemeLayoutSidebarMenuprovideinject<!-- 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
จ่ายอ็อบเจ็กต์ reactive (the ref, ไม่ใช่ .value ของมัน) เพื่อเมื่อมันเปลี่ยนไป คอมโพเนนต์ที่ inject ทั้งหมดจะอัปเดต
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 สำหรับ dependency-injection ภายใน subtree; เลือก Pinia เมื่อ state เป็นแบบ global แท้จริงหรือแชร์ระหว่างส่วนที่ไม่เกี่ยวข้องของแอป
provide/inject ขจัด prop drilling สำหรับข้อมูลที่คอมโพเนนต์ที่ซ้อนกันหลายตัวแชร์ (themes, locale, form/context, plugin services)
การรู้วิธีจ่ายค่า reactive (เพื่อให้การอัปเดตแพร่หลาย) ใช้ default/Symbol keys และแยกแยะจาก global state (Pinia) ช่วยให้คุณส่งบริบทที่แชร์ได้อย่างสะอาดผ่านต้นไม้คอมโพเนนต์ที่ลึก