状态管理 (Pinia Stores)

5 个 Pinia Store，TypeScript 实现 | 文件位于 web/src/stores/

---

架构概览

stores/
├── user.ts         ← 用户数据核心 Store（最复杂）
├── achievement.ts  ← 成就系统（段位 + 徽章）
├── character.ts    ← 汉字数据（分类 + 星球）
├── game.ts         ← 游戏进度（关卡 + 道具）
└── shop.ts         ← 积分商店（兑换 + 密码）

所有 Store 通过 api-service.ts 统一访问 Mock API，不直接操作 localStorage。

---

Store 依赖关系

user.ts ← 无依赖（核心 Store）
  ↑
  ├── achievement.ts  (依赖 user + character + game)
  └── shop.ts         (依赖 user)

character.ts ← 无依赖
game.ts      ← 无依赖

---

数据流

页面组件 → Pinia Store → api-service.ts (axios) → Mock API (mockjs) → localStorage
                                                     ↓
                                             mock/data/index.ts (JSON 数据)

所有数据变更遵循：Store 方法 → 更新 ref → 调用对应 API 端点 → Mock API 拦截 → localStorage 持久化。

---

各 Store 文档

Store	文档	职责
user	user.md	用户数据、学习记录、复习阶段、积分、徽章、星球解锁
achievement	achievement.md	段位系统、30 枚徽章自动解锁
character	character.md	汉字、分类、星球数据加载与过滤
game	game.md	3 款游戏进度、道具管理、关卡解锁
shop	shop.md	积分商店 CRUD、兑换、密码验证