Appearance

07 组件与 Composable ​

7.1 组件目录 ​

Nuxt 会自动注册 ~/components，同时配置了装修引擎组件和模板引擎组件目录。组件应按复用范围组织：

  • 全局通用组件：放在 app/components/。
  • 页面私有组件：放在对应 app/pages/<domain>/components/。
  • 装修区块：放在 app/decoration-engine/components/sections/。
  • 模板区块：放在 app/templateEngines/sections/ 或 blocks/。

7.2 Composable ​

Composable 用于封装可复用的响应式逻辑，例如：

  • useAuthGuard()：统一登录检查和跳转。
  • useToastMessage()：统一提示消息。
  • useHomeData()、useProduct()：首页和商品数据。
  • useApp()：应用初始化和全局能力。
  • 装修相关 composable：页面 DSL 获取、预览上下文、路由上下文和编辑状态。

Composable 应尽量保持单一职责；如果同时包含请求、状态和复杂展示判断，应考虑拆分。

7.3 认证操作 ​

需要登录的按钮或交互优先使用：

ts
const { requireAuth } = useAuthGuard()

await requireAuth(() => cartStore.addItem(params), {
  loginMessage: t('...'),
  redirectAfterLogin: true,
})

这样可以统一提示、登录路径和登录后的返回地址。

7.4 自动导入注意事项 ​

Nuxt 会自动导入 composables、utils 和 Vue 组件。新增文件后确认命名不与已有导入冲突；跨层依赖应使用 ~/ 别名，避免依赖相对路径层级。

7.5 页面组件协作 ​

订单详情、售后详情等复杂页面已经拆分为状态、地址、物流、商品、金额和操作等子组件。新增功能应优先沿用现有页面域的拆分方式，避免把完整业务流程写入单个 .vue 文件。