Appearance

06 状态管理 ​

6.1 Pinia ​

项目使用 Pinia 管理跨页面状态，Store 位于 app/stores/，通过 Nuxt 自动导入或显式导入使用。

当前主要 Store：

  • user：登录态、用户资料、访问 Token 和刷新 Token。
  • cart：有效商品、失效商品、金额汇总和购物车操作。
  • cartUI：购物车 loading、局部操作 loading 和更新时间。
  • product：商品相关页面状态。
  • counter：基础示例状态。

6.2 用户状态 ​

useUserStore() 初始化时从 Cookie 读取 token 和 refreshToken。登录流程为：

text
登录 API
  → AuthTransformer 转换登录模型
  → setToken 写入 Store 和 Cookie
  → fetchUserInfo 拉取会员资料
  → 页面读取 isLoggedIn / userInfo

支持账号密码登录、手机验证码登录、登出、用户资料拉取和 Token 刷新。用户资料请求并发时通过共享 Promise 合并请求，避免重复拉取。

登录成功后 Token Cookie 默认有效期为 7 天，刷新 Token Cookie 默认有效期为 30 天。登出会清理认证信息并重置本地购物车。

6.3 购物车状态 ​

购物车 Store 同时维护：

  • items：有效商品。
  • invalidItems：失效商品。
  • cartTotalPrice：后端返回的商品总计，单位为分。
  • discountFee：后端返回的优惠金额，单位为分。
  • initialized：是否完成初始化。

购物车缓存使用客户端 localStorage 的 cart_cache。恢复缓存时会重新构造 MoneyValueObject 和 QuantityValueObject，避免 JSON 序列化后丢失值对象行为。

6.4 乐观更新 ​

删除商品、修改数量、切换选中状态和全选操作采用乐观更新：

text
立即更新本地状态
  → 调用后端接口
  → 成功：静默同步汇总
  → 失败：恢复旧状态并抛出错误

涉及金额和数量的修改应使用值对象校验，不要直接绕过 MoneyValueObject 或 QuantityValueObject。

6.5 Store 使用原则 ​

  • 页面级临时状态优先使用组件 ref，不要全部放入 Store。
  • Store action 负责业务操作和异常边界，组件负责展示和交互。
  • SSR 代码中不要直接读取 localStorage。
  • 修改 Store 状态结构时同步调整类型、Transformer、缓存恢复逻辑和测试。