MenuItemthemeLayoutSidebarMenuprovideinject<!-- App.vue -->
<script setup>
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme); // `theme`를 모든 자손에게 제공
provide("toggleTheme", () => { // 함수도 제공 가능
theme.value = theme.value === "dark" ? "light" : "dark";
});
</script>
<!-- MenuItem.vue (깊이 중첩됨) -->
<script setup>
import { inject } from "vue";
const theme = inject("theme"); // 중간 props 없이 직접 가져옴
const toggleTheme = inject("toggleTheme");
const color = inject("color", "blue"); // 기본값 폴백과 함께
</script>
// ✅ ref/reactive를 제공하여 자손이 업데이트를 보게 함
provide("theme", theme); // theme는 ref → 반응형
// ❌ provide("theme", theme.value) → 스냅샷을 전달, 반응형 아님
반응형 객체(.value가 아니라 ref 자체)를 제공하여, 변경 시 inject하는 모든 컴포넌트가 업데이트되도록 하세요.
import { themeKey } from "./keys"; // export const themeKey = Symbol()
provide(themeKey, theme); // 문자열 키 충돌 방지
provide/inject → 특정 하위 트리로 데이터 전달 (테마, 폼 컨텍스트, 서비스)
Pinia → 전역, 앱 전체 공유 상태 (사용자, 장바구니) 어디서나 사용 가능
하위 트리 내의 의존성 주입에는 provide/inject를 사용하고, 상태가 진정으로 전역이거나 앱의 관련 없는 부분 간에 공유될 때는 Pinia를 선택하세요.
provide/inject는 많은 중첩 컴포넌트가 공유하는 데이터(테마, 로케일, 폼/컨텍스트, 플러그인 서비스)의 prop drilling을 제거합니다.
반응형 값을 제공하고(업데이트가 전파되도록), 기본값/Symbol 키를 사용하며, 전역 상태(Pinia)와 구분하는 법을 알면 깊은 컴포넌트 트리를 통해 공유 컨텍스트를 깔끔하게 전달할 수 있습니다.