Nuxt-功能上的分层架构

• 功能应该如何分层
• 什么样的功能放在 Store
• 什么样的功能放在 Composable
• 什么样的功能放在 UI 页面
• 提供具体的判断标准
• 给出清晰的示例

这个章节应该包含：

1. 功能分层的核心原则
2. Store、Composable、Page 层的功能对比表
3. 具体的判断标准和流程
4. 常见场景的示例
5. 边界情况的处理

✅ 新增内容概览

📚 新增章节：功能分层判断指南

位置：在 “Vue 应用架构设计规范” → “Composables 职责划分” 之后

📋 包含的内容

1. 核心原则表格

通过 5 个维度对比 Store、Composable、Page：

• 复用范围
• 业务相关性
• 持久化需求
• 复杂度
• UI 依赖

2. 功能对比表

提供 10 种常见功能类型的判断标准：

3. 功能判断流程图

提供直观的决策树，帮助快速判断功能应该放在哪一层：

• 需要跨页面共享？→ Store
• 需要持久化？→ Store
• 简单 CRUD？→ Store
• 涉及 UI 库？→ Page
• 涉及路由操作？→ Page
• 简单计算？→ Page
• 需要组合多个 Store？→ Composable
• 页面特定业务逻辑？→ Composable

4. 具体场景示例

提供了 3 个完整场景的详细说明：

场景 1：购物车功能

• 12 个功能的具体实现位置
• 每个功能的代码示例
• 判断依据说明

场景 2：商品详情页

• 13 个功能的具体实现位置
• 数据转换、图片切换、数量控制的判断依据

场景 3：订单列表页

• 11 个功能的具体实现位置
• 筛选、状态管理、UI 交互的判断依据

5. 边界情况处理

详细说明了 4 种边界情况的判断标准：

边界 1：既可以在 Store 也可以在 Composable 中的计算

• 判断标准：是否在多个页面使用
• 示例：总价计算

边界 2：简单计算 vs 复杂判断

• 判断标准：算术运算 vs 组合多个状态
• 示例：isEmpty vs canAddToCart

边界 3：Store 方法是否需要包装

• 判断标准：是否需要统一错误处理
• 示例：deleteItem 的包装

边界 4：页面特定状态 vs 全局状态

• 判断标准：是否跨页面共享
• 示例：currentPage vs items

6. 快速判断口诀

提供简洁的记忆口诀，帮助快速判断：

数据存储、持久化    → Store
简单 CRUD、纯计算    → Store
跨页面共享           → Store

页面特定状态         → Composable
复杂业务逻辑         → Composable
Store 方法包装       → Composable
数据转换逻辑         → Composable

简单计算、长度判断   → Page
UI 交互、弹窗提示   → Page
路由跳转、参数传递   → Page
局部组件状态         → Page

🎯 使用方法

开发者在开发新功能时，可以：

1. 查看核心原则表格 – 了解三层的定位
2. 查看功能对比表 – 找到类似功能的实现位置
3. 使用判断流程图 – 按步骤判断自己的功能应该放在哪一层
4. 查看具体场景示例 – 参考实际案例
5. 遇到边界情况 – 查看边界情况处理章节
6. 使用快速口诀 – 快速回忆判断标准

📝 文档已更新，所有示例都基于项目实际代码，可以直接参考使用！