74 lines
2.5 KiB
Markdown
74 lines
2.5 KiB
Markdown
---
|
||
name: stores-state
|
||
description: >
|
||
Duooomi 应用全局状态管理 (MobX Store) 使用指南。当需要访问或修改用户信息、登录状态、蓝牙设备、用户余额等全局状态时触发。Store 使用 MobX + 单例模式。导入路径 `@/stores`。适用于：(1) 读写用户登录态 (2) 管理 BLE 蓝牙设备 (3) 管理用户积分余额 (4) 全局状态共享。
|
||
---
|
||
|
||
# Stores 全局状态管理
|
||
|
||
使用 MobX `makeAutoObservable` 单例模式。
|
||
|
||
```tsx
|
||
import { userStore, bleStore, userBalanceStore } from '@/stores'
|
||
```
|
||
|
||
## userStore - 用户状态
|
||
|
||
```tsx
|
||
// 读取
|
||
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 - 蓝牙设备状态
|
||
|
||
```tsx
|
||
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 - 用户余额
|
||
|
||
```tsx
|
||
userBalanceStore.balance // number
|
||
userBalanceStore.isPolling // boolean
|
||
await userBalanceStore.load(force?) // 加载（5秒防抖）
|
||
userBalanceStore.setBalance(100) // 乐观更新
|
||
userBalanceStore.deductBalance(10) // 扣减
|
||
userBalanceStore.startPolling() // 60秒轮询（前后台自动切换）
|
||
userBalanceStore.stopPolling()
|
||
userBalanceStore.reset()
|
||
```
|
||
|
||
## 组件中使用
|
||
|
||
```tsx
|
||
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')` 解耦
|