Vue 3 provide/inject 怎么避免跨组件状态类型丢失

Vue 3 的 provide/inject 很适合把主题、表单上下文或局部工作区状态传给深层子组件，但只写成 provide('theme', value)，消费方往往会遇到两个问题：字符串键拼错后只能在运行时发现，注入结果还会退化成 unknown 或 undefined。解决办法不是到处补类型断言，而是把注入键和上下文类型绑定起来。

先把注入键和上下文类型绑在一起

跨组件状态丢类型，最常见的根因是提供方和消费方各自写了一个字符串，或者只给 inject 补了一个过宽的泛型。把键单独放进 keys.ts，让它成为项目内唯一入口：

// keys.ts：键和上下文类型一起导出，供父子组件复用
import type { InjectionKey, Ref } from 'vue'

export type ThemeName = 'light' | 'dark'

export interface ThemeContext {
  theme: Readonly>
  setTheme: (next: ThemeName) => void
}

// 泛型参数会同时约束 provide 的值和 inject 的结果
export const themeKey: InjectionKey = Symbol('theme')

这里的关键不是 Symbol 本身，而是 InjectionKey。提供方传入不符合 ThemeContext 的对象时，TypeScript 会报错；消费方使用同一个键时，结果会推导为 ThemeContext | undefined，而不是无约束的 unknown。键应放在可被两侧导入的普通模块中，避免父子组件分别声明“看起来一样”的类型。

提供响应式状态时，别把修改权限一起散出去

父组件可以提供 ref，子孙组件会保持这条响应式连接。实践中可以把状态包成只读引用，再把变更集中到一个函数里，这样消费方不会直接改写上下文对象：

如果直接提供 theme，注入方仍会得到一个响应式引用，但也获得了写入入口。readonly 只限制消费方的修改，不会切断父组件更新带来的响应式刷新；真正需要改变主题时，调用上下文里的 setTheme 即可。

必需注入、可选注入和默认值要分开写

inject(themeKey) 在类型上可能是 ThemeContext | undefined，这是合理的：Vue 无法仅凭 TypeScript 知道祖先组件在运行时一定存在。对页面内部必然包在 Provider 中的依赖，可以用一个小封装把缺失情况尽早变成明确错误：

// useTheme.ts：必需依赖缺失时立即提示组件树配置错误
import { inject } from 'vue'
import { themeKey } from './keys'

export function useTheme() {
  const context = inject(themeKey)
  if (!context) {
    // 比让后续代码在 context.theme 处崩溃更容易定位
    throw new Error('useTheme 必须在 ThemeProvider 后代组件中调用')
  }
  return context
}

如果某个组件确实允许脱离 Provider 工作，就保留 undefined，在调用点做分支。只有在“没有提供方时使用固定行为”这个产品约束成立时，才传默认值；对象或工厂状态要注意默认值的创建时机：

// 可选依赖：缺失时返回 undefined，由组件决定是否降级
const context = inject(themeKey)

// 默认值：只在组件允许无 Provider 运行时使用
const fallback = inject(themeKey, () => createLocalTheme(), true)

第三个参数为 true 时，Vue 会把第二个参数当作默认值工厂，只有找不到提供值时才调用。不要为了消除类型报错，给所有注入都塞一个“空对象”；那会把真正的层级配置错误变成更晚、更隐蔽的业务异常。

用一张边界清单检查类型有没有真正保住

完成改造后，重点检查的是提供方、消费方和降级策略是否使用同一个约定，而不是盯着某个类型断言是否通过。

最后运行项目的 TypeScript 检查，重点看 provide 的对象字段、键的导入路径和默认值工厂返回值。类型通过只说明静态契约一致，Provider 是否真的位于组件祖先链上，仍需要在对应页面的挂载路径中确认。

相关问题

为什么直接写字符串键时 inject 会变成 unknown？

字符串本身不携带上下文类型，Vue 只能按默认签名返回未知类型。可以临时使用 inject('theme')，但共享的 InjectionKey 更不容易让提供方和消费方失配。

inject 拿到的 ref 需要手动解包吗？

需要按 ref 使用方式读取，例如 theme.value。Vue 会把提供的 ref 原样注入，不会在 inject 这一步自动解包，这正是响应式连接能够保留的原因。

什么时候应该给 inject 传默认值？

只有组件在没有 Provider 时仍有明确、可接受的降级行为才使用默认值。页面结构要求必须存在 Provider 时，封装必需注入并抛出清晰错误更容易排查。