expo-duooomi-app/.claude/skills/stores-state/SKILL.md

2.5 KiB
Raw Blame History

name description
stores-state Duooomi 应用全局状态管理 (MobX Store) 使用指南。当需要访问或修改用户信息、登录状态、蓝牙设备、用户余额等全局状态时触发。Store 使用 MobX + 单例模式。导入路径 `@/stores`。适用于:(1) 读写用户登录态 (2) 管理 BLE 蓝牙设备 (3) 管理用户积分余额 (4) 全局状态共享。

Stores 全局状态管理

使用 MobX makeAutoObservable 单例模式。

import { userStore, bleStore, userBalanceStore } from '@/stores'

userStore - 用户状态

// 读取
userStore.user         // User | null
userStore.isLogin      // boolean
userStore.isLoading    // boolean
userStore.scannedQR    // string | null

// 操作
await userStore.setUser(user)          // 设置用户+持久化
await userStore.getUserData()          // 获取session+绑定设备
await userStore.signOut()              // 登出(重置所有+余额store
userStore.setScannedQR(value)          // 设置二维码
await userStore.bindBluetooth({ sn, version })

登录: getUserData() -> session -> setUser -> bindDevice 登出: signOut() -> authSignOut -> reset -> reset(userBalanceStore)

bleStore - 蓝牙设备状态

bleStore.state.isConnected / .connectedDevice / .transferProgress / .loading.*
bleStore.galleryList                   // 图库列表
bleStore.addGalleryItem(url) / .removeGalleryItem(url)
bleStore.bindDeviceList                // 绑定设备列表
bleStore.addBindDeviceItem(item)       // 添加(自动同步服务端)
bleStore.removeBindDeviceItem(id)      // 移除(自动解绑)
bleStore.setState(prev => ({ ...prev, isConnected: true }))

userBalanceStore - 用户余额

userBalanceStore.balance               // number
userBalanceStore.isPolling             // boolean
await userBalanceStore.load(force?)    // 加载5秒防抖
userBalanceStore.setBalance(100)       // 乐观更新
userBalanceStore.deductBalance(10)     // 扣减
userBalanceStore.startPolling()        // 60秒轮询前后台自动切换
userBalanceStore.stopPolling()
userBalanceStore.reset()

组件中使用

import { observer } from 'mobx-react-lite'
const MyComponent = observer(() => <Text>{userStore.user?.name}</Text>)

新 Store 规范

  1. makeAutoObservable(this) + 导出单例
  2. stores/index.ts 统一导出
  3. 持久化用 storage.get/set
  4. 异步修改用 runInAction()
  5. 关联 store 用 await import('./otherStore') 解耦