依赖注入是多步骤表单向导中实现全局状态向下贯通最轻量、语义最清晰的方式，通过 symbol 键 provide 响应式上下文（含步数、数据、方法），子组件 inject 使用，配合 useformwizard hook 封装复用，并可协同 pinia 管理业务层状态。
在多步骤表单向导中，依赖注入（provide/inject）是实现全局状态向下贯通最轻量、最语义清晰的方式——它不污染全局 store，也不依赖 props 逐层透传，而是让整个向导组件树共享同一份响应式上下文。
用 provide 注入统一的表单状态与控制逻辑
在向导根组件（如 OnboardingWizard.vue）的 setup 中，创建并提供一个响应式状态对象，包含当前步数、各步数据、校验结果及跳转方法：
- 使用
reactive或ref包裹状态，确保响应性可被后代注入后持续追踪 - 把
next()、prev()、goTo(step)等方法一并提供，子步骤组件无需自行维护索引逻辑 - 推荐用
Symbol作注入键（如const FORM_CONTEXT = Symbol('formContext')），避免字符串命名冲突
子步骤组件通过 inject 获取并响应式使用
每个步骤组件（如 StepProfile.vue、StepPreferences.vue）直接调用 inject(FORM_CONTEXT)，拿到完整上下文：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 读取
state.currentStep判断是否激活，控制显示/隐藏或动画 - 写入
state.data[stepKey] = value，自动触发父级和其他步骤的响应更新 - 调用
context.next()提交本步并进入下一步，无需 emit 事件再由父组件监听处理 - 注意：不要解构
inject返回的对象再赋值（如const { data } = inject(...)），应始终保留对原始响应式引用的访问
配合组合式函数封装复用逻辑
将表单上下文抽成可复用的 useFormWizard() Hook，内部完成 provide 和状态初始化：
- 父组件只需
useFormWizard({ steps: ['profile', 'prefs', 'confirm'] })即可启动向导 - 子组件调用
useStep(stepKey)自动注入对应字段、校验规则和提交回调 - 支持局部校验（如某步必填）、跨步联动（如 step2 的选项影响 step1 的禁用状态）
与 Pinia 或 Vuex 的协作边界
依赖注入适合“功能域内封闭”的向导流程；若该表单状态需跨路由持久化、被其他模块读取或参与全局业务逻辑（如用户注册成功后同步到用户中心），则应在 provide 的同时，将关键字段同步至 Pinia store：
- 例如在
next()方法内部，调用userStore.updatePartial(formContext.state.data) - 保持
provide/inject负责 UI 层状态流转，Pinia 负责业务层状态归档，职责分明 - 避免把整个 form state 直接
provide一份 Pinia 实例——那样会失去作用域隔离，也违背模块自治原则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
