2.5 KiB
2.5 KiB
| 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 规范
makeAutoObservable(this)+ 导出单例- 在
stores/index.ts统一导出 - 持久化用
storage.get/set - 异步修改用
runInAction() - 关联 store 用
await import('./otherStore')解耦