M5-14详细设计:Nuxt组合式能力与页面编排边界
这份设计文档说明 M5-14 为什么选择 Nuxt 组合式能力分层场景,以及它将如何接入现有方法库。
设计目标
把 Nuxt composable 问题从“页面里到底该抽几个 useXxx()”还原成“页面入口、页面业务编排、feature 内部步骤、store 归属和页面契约如何协同”的边界设计问题,并用一篇案例把大型 Nuxt 页面里更稳的编排方式说清楚。
为什么在 M5-14 选 Nuxt组合式能力分层
在当前方法库里,已经补齐了:
- 页面型案例
- 基础组件型案例
- SSR / hydration 运行时边界
- Nuxt 页面数据获取与渲染边界
- 状态管理型案例
- 复杂交互型案例
- 认证与权限型案例
- 路由与布局型案例
- 容错与降级型案例
- 异步加载型案例
- Nuxt 运行时边界型案例
- Nuxt 响应策略型案例
- Nuxt 执行时机型案例
- Nuxt 依赖边界型案例
- Nuxt 接口边界型案例
下一步最自然补的,就是 Nuxt 组合式能力分层与页面编排边界这条横向主线。因为它会同时影响:
- 页面顶层代码的可读性与可迁移性
- composable 公共入口与 feature 内部步骤的职责划分
- store 与页面局部状态的归属边界
- 页面级数据、副作用、SEO 与路由同步的编排方式
所以 Nuxt 组合式能力分层是一个非常适合作为 M5-14 的横向扩展线。
本轮案例的复杂度中心
本轮复杂度中心主要有四个:
- 页面入口层、页面业务 composable 层与 feature 步骤层的三段式模型
- store 归属与页面局部状态的边界
- 页面契约驱动的数据获取、副作用与派生状态协同
- 页面保持轻量和页面保留语义之间的平衡
与现有框架的映射关系
本轮将重点强化统一框架中的这些步骤:
- 第二步:找到真正的复杂度中心
- 第四步:判断状态应该放在页面、组件还是 composable
- 第六步:显式数据流优先,隐式通信后退
- 第九步:让页面消费层尽量薄
- 第十步:先完成可维护版本,再追求“优雅”抽象
本轮交付物
本轮预期交付物包括:
- 新案例:
../Nuxt组合式能力分层与页面编排边界重构.md - 新任务拆解:
44-M5-14任务拆解-Nuxt组合式能力分层场景.md - 新详细设计:
45-M5-14详细设计-Nuxt组合式能力与页面编排边界.md - 新开发记录:
46-开发记录-Nuxt组合式能力分层与页面编排重构.md
设计约束
本轮继续遵循当前项目约束:
- 不直接修改独立 demo 源码
- 只提炼核心逻辑与方法进入文档
- 每轮新增案例都要同步更新入口、导航和总框架
完成后的预期效果
完成后,当前方法库将会同时覆盖:
- 页面型重构
- 基础组件型重构
- 运行时边界型重构
- 框架场景型重构
- 状态管理型重构
- 复杂交互型重构
- 认证与权限型重构
- 路由与布局型重构
- 容错与降级型重构
- 异步加载型重构
- Nuxt 运行时边界型重构
- Nuxt 响应策略型重构
- Nuxt 执行时机型重构
- Nuxt 依赖边界型重构
- Nuxt 接口边界型重构
- Nuxt 页面编排型重构
这会让整套方法库从“知道该把代码放在哪”,继续长成“知道页面应该如何收口编排复杂度”的 Vue / Nuxt 架构重构地图。
