Provide 实现的步骤条状态机核心是构建可响应、可拦截、可扩展的状态中枢,而非简单存储步骤数据;它封装状态字段与行为方法,统一驱动流转、校验与副作用,并通过信号机制解耦步骤组件。

用 Provide 实现复杂 Step 步骤条状态机,核心不是“把步骤塞进一个变量”,而是构建一个**可响应、可拦截、可扩展的状态中枢**,让每一步的进入、退出、校验、跳转都由统一逻辑驱动,同时保持各步骤组件完全解耦。
定义语义化状态管理类(非简单数据容器)
Provide 的值不能只是 { current: 'info', steps: [...] } 这样的静态结构。它应是一个具备行为能力的状态对象:
- 封装当前步骤 key、历史路径、锁定状态、各步骤完成标记等字段
- 提供
goTo(key)、next()、prev()、markComplete(key)等方法,内部含校验与副作用(如保存草稿、清空缓存) - 继承 ChangeNotifier(Flutter)或使用 reactive + emit(Vue)/ @Provide 响应式更新机制(ArkTS),确保调用后下游自动刷新
- 关键:所有跳转动作必须返回 Promise 或布尔值,用于上层做拦截判断(例如“未填完不可跳”)
步骤组件只 emit 意图,不决定目标
每个步骤页(如 InfoStep、UploadStep)内部不写 goTo('review'),而是发出轻量信号:
- Flutter:触发
stepController.emit(StepAction.submit)(配合 Stream / Provider.listen) - Vue:执行
this.$emit('submit')或bus.emit('step:submit', { step: 'info' }) - ArkTS:调用
this.onStepSubmit?.()(通过 @Consume 绑定的回调函数) - 所有信号都不带目标步骤,只说明“我已就绪”或“我想后退”,由顶层状态机结合上下文决策下一步
顶层 Provide 层统一处理流转逻辑
在流程根组件中 create 并 provide 这个状态实例,它要能:
- 根据角色权限动态计算可跳转列表(如管理员可跳过审核,普通用户不可)
- 拦截非法跳转:检查前置步骤是否完成、必填项是否为空、后端接口是否返回校验失败
- 支持强制跳转(force: true)与条件跳转(如“支付成功 → 成功页”,失败 → 当前页+错误提示)
- 维护导航历史栈,支持多级返回(不只是上一步,而是回到指定锚点)
- 与路由联动:调用
goTo('review')同时触发 Navigator.pushNamed,保持 URL 同步
跨组件状态同步需配合消费策略
不同框架下 @Consume / Consumer / inject 的使用有细节差异,但原则一致:
- 步骤条 UI 组件(显示圆点、连线、文字)用 Consumer / @Consume 监听
currentStep和steps配置,不关心业务逻辑 - 步骤内容组件(InfoStep)只消费当前 step 的数据快照和操作方法(如
saveDraft),不直接读取其他步骤状态 - 避免在子组件中修改 Provide 的原始响应式对象属性(如 this.state.current = 'xxx'),一律走方法调用,保证逻辑集中
- ArkTS 中注意 API 20+ 支持 @Consume 默认值,可在子组件未找到 @Provide 时降级为 loading 状态,提升健壮性









