Vue3 provide/inject 怎么做类型安全的依赖注入？

Question

仓乃文 · Accepted Answer

provide/inject 默认没有类型提示，inject 返回值是 any，容易出错。用 InjectionKey 配合泛型可以实现完整的类型推导，让 provide 和 inject 的类型保持一致。定义类型安全的 Key： ```javascript import { inject, provide, type InjectionKey } from "vue"; // 定义带类型的 Key const ThemeKey: InjectionKey<{ theme: string; toggle: () => void }> = Symbol("theme"); // 父组件 provide const theme = ref("dark"); const toggle = () => theme.value = theme.value === "dark" ? "light" : "dark"; provide(ThemeKey, { theme, toggle }); // 子组件 inject（自动推导类型） const { theme, toggle } = inject(ThemeKey)!; // 完整类型提示 ``` 封装为 Composable： ```javascript export function createThemeContext() { const key: InjectionKey<{ theme: Ref; toggle: () => void }> = Symbol(); const provideTheme = () => { const theme = ref("dark"); provide(key, { theme, toggle: () => theme.value = theme.value === "dark" ? "light" : "dark" }); }; const useTheme = () => inject(key)!; return { provideTheme, useTheme }; } ``` 补充说明： - InjectionKey 用 Symbol 做唯一标识，避免命名冲突 - inject 的第二个参数是默认值，不提供时返回 undefined - 封装为 createXxxContext 模式，provide 和 use 分离，更安全 - 适合主题、国际化、用户信息等跨层级数据共享 - 比 Pinia 更轻量，适合组件树内的局部状态共享