Vue 的 provide/inject 配合 reactive/ref 是轻量级全局状态管理方案：用 Symbol 作 key 提供响应式状态，子组件 inject 后直接使用，支持按需注入与组合式函数封装，适合中小型项目。
不用 Pinia 时，Vue 的 provide/inject 配合响应式数据，就是最自然、最轻量的全局状态管理替代方案。它不引入额外依赖，不污染全局命名空间，更新精准且可测试性强，适合中小型项目或局部跨组件协同场景。
用 reactive 或 ref 封装共享状态
在独立模块（如 sharedState.js）中创建响应式对象，并导出供根组件注入：
- 用
reactive管理结构化状态（推荐），例如主题、语言、用户基础信息 - 用
ref管理简单值（如开关、计数器），但注意 ref 解构后会丢失响应性，应始终通过.value访问或使用toRefs - 状态逻辑可封装为函数（如
login()、toggleTheme()），直接定义在 reactive 对象内部或作为配套方法导出
在根组件或布局组件中 provide
确保状态只在需要的地方注入，避免全应用无差别暴露：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 通常在
App.vue或主布局组件的setup中调用provide('key', state) - key 建议用 Symbol 避免字符串冲突，例如
const SharedStateKey = Symbol('shared-state') - 若状态需按需加载（如权限模块），可在异步组件内 provide，实现真正的“按需注册”
子组件中 inject 并响应式使用
子组件通过 inject 获取状态，无需额外 watch 或 computed 就能自动响应：
立即学习“前端免费学习笔记（深入）”；
- 使用
const state = inject(SharedStateKey)，返回的是原始 reactive 对象，所有属性天然响应 - 修改
state.theme = 'dark'会立即触发依赖该状态的模板更新 - 如需监听某个字段变化，可用
watch(() => state.lang, ...)，无需中转 computed
组合式函数进一步封装逻辑复用
把状态 + 方法打包成可复用的组合式函数，提升可维护性：
- 写
useTheme()，内部创建 reactive 主题状态并返回toggle()等方法 - 在根组件中
provide('theme', useTheme())，子组件inject('theme')即得完整能力 - 这种方式支持 tree-shaking：未被 import 的组合函数不会进入打包产物
