From 1977aa50c25ad84e6e31d5e073fe91101dde31b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Thu, 11 Sep 2025 17:15:47 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E7=A4=BA=E4=BE=8B?= =?UTF-8?q?=E5=AD=98=E5=82=A8=E6=96=87=E4=BB=B6examples.ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Touchkebao/src/store/README.md | 572 ------------------------------- Touchkebao/src/store/examples.ts | 325 ------------------ 2 files changed, 897 deletions(-) delete mode 100644 Touchkebao/src/store/README.md delete mode 100644 Touchkebao/src/store/examples.ts diff --git a/Touchkebao/src/store/README.md b/Touchkebao/src/store/README.md deleted file mode 100644 index 71345a4d..00000000 --- a/Touchkebao/src/store/README.md +++ /dev/null @@ -1,572 +0,0 @@ -# Store 持久化使用指南 - -## 概述 - -本项目使用 Zustand 作为状态管理库，并实现了完整的持久化功能。所有 store 都支持数据持久化，确保用户数据在页面刷新后不会丢失。 - -## 🚀 新功能特性 - -### 高级持久化功能 - -- **数据压缩**: 减少存储空间占用 -- **数据加密**: 保护敏感数据安全 -- **TTL支持**: 自动过期机制 -- **批量操作**: 提高性能 -- **存储监控**: 实时监控存储使用情况 -- **数据迁移**: 版本管理和数据升级 -- **备份恢复**: 完整的数据备份和恢复功能 - -## 已实现的持久化 Store - -### 1. User Store (`user.ts`) - -- **存储内容**: 用户信息、登录状态、token -- **存储位置**: localStorage -- **持久化键**: `user-store` - -```typescript -import { useUserStore } from "@/store"; - -// 使用用户状态 -const { user, isLoggedIn, login, logout } = useUserStore(); - -// 登录 -login(token, userInfo, deviceTotal); - -// 登出 -logout(); -``` - -### 2. App Store (`app.ts`) - -- **存储内容**: 应用状态、主题设置、调试模式等 -- **存储位置**: localStorage -- **持久化键**: `app-store` - -```typescript -import { useAppStore } from "@/store"; - -// 使用应用状态 -const { app, setTheme, setDebugMode } = useAppStore(); - -// 设置主题 -setTheme("dark"); - -// 切换调试模式 -setDebugMode(true); -``` - -### 3. Settings Store (`settings.ts`) - -- **存储内容**: 应用设置、语言、时区等 -- **存储位置**: localStorage -- **持久化键**: `settings-store` - -```typescript -import { useSettingsStore } from "@/store"; - -// 使用设置状态 -const { settings, updateSetting } = useSettingsStore(); - -// 更新设置 -updateSetting("language", "en-US"); -``` - -## 创建新的持久化 Store - -### 基础持久化 Store - -```typescript -import { createPersistStore } from "@/store"; - -interface MyState { - data: any[]; - loading: boolean; - setData: (data: any[]) => void; - setLoading: (loading: boolean) => void; -} - -export const useMyStore = createPersistStore( - set => ({ - data: [], - loading: false, - setData: data => set({ data }), - setLoading: loading => set({ loading }), - }), - { - name: "my-store", - partialize: state => ({ - data: state.data, - }), - onRehydrateStorage: () => state => { - console.log("My store hydrated:", state); - }, - }, -); -``` - -### 便利函数创建 Store - -```typescript -import { - createLocalStorageStore, - createSessionStorageStore, - createEncryptedStore, - createCompressedStore, - createTTLStore, -} from "@/store"; - -// 创建 localStorage 持久化 store -export const useLocalStore = createLocalStorageStore( - set => ({ - // state and actions - }), - "local-store", - state => ({ - /* partialize */ - }), - { ttl: 24 * 60 * 60 * 1000 }, // 24小时TTL -); - -// 创建 sessionStorage 持久化 store -export const useSessionStore = createSessionStorageStore( - set => ({ - // state and actions - }), - "session-store", - state => ({ - /* partialize */ - }), -); - -// 创建加密持久化 store -export const useEncryptedStore = createEncryptedStore( - set => ({ - // state and actions - }), - "encrypted-store", - "your-secret-key", - state => ({ - /* partialize */ - }), -); - -// 创建压缩持久化 store -export const useCompressedStore = createCompressedStore( - set => ({ - // state and actions - }), - "compressed-store", - state => ({ - /* partialize */ - }), -); - -// 创建TTL持久化 store -export const useTTLStore = createTTLStore( - set => ({ - // state and actions - }), - "ttl-store", - 24 * 60 * 60 * 1000, // 24小时TTL - state => ({ - /* partialize */ - }), -); -``` - -## 高级持久化功能 - -### 数据压缩 - -```typescript -// 启用压缩以减少存储空间 -const useCompressedStore = createPersistStore(createState, { - name: "compressed-store", - compress: true, // 启用压缩 -}); -``` - -### 数据加密 - -```typescript -// 启用加密以保护敏感数据 -const useEncryptedStore = createPersistStore(createState, { - name: "encrypted-store", - encrypt: true, - encryptionKey: "your-secret-key", -}); -``` - -### TTL (Time To Live) - -```typescript -// 设置数据自动过期时间 -const useTTLStore = createPersistStore(createState, { - name: "ttl-store", - ttl: 24 * 60 * 60 * 1000, // 24小时后自动过期 -}); -``` - -### 数据迁移 - -```typescript -// 版本管理和数据迁移 -const useMigratedStore = createPersistStore(createState, { - name: "migrated-store", - version: 2, - migrate: (persistedState, version) => { - if (version === 1) { - // 从版本1迁移到版本2 - return { - ...persistedState, - newField: "default-value", - }; - } - return persistedState; - }, -}); -``` - -## 持久化工具函数 - -### 数据管理 - -```typescript -import { - getPersistedData, - setPersistedData, - removePersistedData, - clearAllPersistedData, - getStorageUsage, - cleanupExpiredData, -} from "@/store"; - -// 获取持久化数据 -const data = getPersistedData("user-store", "localStorage"); - -// 设置持久化数据（带配置） -setPersistedData("my-key", { value: "test" }, "localStorage", { - compress: true, - encrypt: true, - ttl: 24 * 60 * 60 * 1000, -}); - -// 移除持久化数据 -removePersistedData("my-key", "localStorage"); - -// 清除所有持久化数据 -clearAllPersistedData(); - -// 获取存储使用情况 -const usage = getStorageUsage("localStorage"); -console.log( - `使用: ${usage.used} bytes, 总计: ${usage.total} bytes, 使用率: ${usage.percentage}%`, -); - -// 清理过期数据 -const cleanedCount = cleanupExpiredData(); -console.log(`清理了 ${cleanedCount} 个过期数据`); -``` - -### 批量操作 - -```typescript -import { - batchSetPersistedData, - batchGetPersistedData, - batchMigrateData, -} from "@/store"; - -// 批量设置数据 -const results = batchSetPersistedData( - { - key1: { value: "data1" }, - key2: { value: "data2" }, - key3: { value: "data3" }, - }, - "localStorage", - { compress: true }, -); - -// 批量获取数据 -const data = batchGetPersistedData(["key1", "key2", "key3"], "localStorage"); - -// 批量迁移数据 -const migrationResults = batchMigrateData({ - "user-store": oldData => ({ ...oldData, version: "2.0" }), - "app-store": oldData => ({ ...oldData, newField: "default" }), -}); -``` - -### 数据迁移 - -```typescript -import { migratePersistedData } from "@/store"; - -// 迁移数据 -migratePersistedData("user-store", "localStorage", oldData => { - // 转换旧数据格式到新格式 - return { - ...oldData, - newField: "default-value", - }; -}); -``` - -### 数据备份和恢复 - -```typescript -import { - backupPersistedData, - restorePersistedData, - exportPersistedData, - importPersistedData, -} from "@/store"; - -// 备份所有持久化数据 -const backup = backupPersistedData(); - -// 恢复持久化数据 -restorePersistedData(backup); - -// 导出备份数据为JSON字符串 -const jsonData = exportPersistedData(); - -// 从JSON字符串导入备份数据 -const success = importPersistedData(jsonData); -``` - -## Store 状态管理 - -### 获取 Store 状态 - -```typescript -import { - getStores, - getUserStore, - getAppStore, - getSettingsStore, -} from "@/store"; - -// 获取所有store状态 -const allStores = getStores(); - -// 获取特定store状态 -const userState = getUserStore(); -const appState = getAppStore(); -const settingsState = getSettingsStore(); -``` - -### Store 订阅 - -```typescript -import { - subscribeToUserStore, - subscribeToAppStore, - subscribeToSettingsStore, - subscribeToAllStores, -} from "@/store"; - -// 订阅单个store -const unsubscribeUser = subscribeToUserStore(state => { - console.log("User store changed:", state); -}); - -// 订阅所有store -const unsubscribeAll = subscribeToAllStores(state => { - console.log("Any store changed:", state); -}); - -// 取消订阅 -unsubscribeUser(); -unsubscribeAll(); -``` - -## 配置选项 - -### PersistConfig 接口 - -```typescript -interface PersistConfig { - name: string; // 存储键名 - partialize?: (state: T) => any; // 选择性持久化 - storage?: Storage; // 存储类型 (localStorage/sessionStorage) - version?: number; // 版本号，用于数据迁移 - migrate?: (persistedState: any, version: number) => any; // 迁移函数 - onRehydrateStorage?: (state: any) => void; // 重新水合回调 - skipHydration?: boolean; // 跳过水合 - compress?: boolean; // 启用压缩 - encrypt?: boolean; // 启用加密 - ttl?: number; // 生存时间（毫秒） - encryptionKey?: string; // 加密密钥 -} -``` - -### StorageConfig 接口 - -```typescript -interface StorageConfig { - compress: boolean; // 是否压缩 - encrypt: boolean; // 是否加密 - ttl?: number; // 生存时间 -} -``` - -## 最佳实践 - -### 1. 选择性持久化 - -只持久化必要的数据，避免存储过大的状态： - -```typescript -partialize: state => ({ - user: state.user, - token: state.token, - // 不持久化临时状态 - // loading: state.loading, -}); -``` - -### 2. 数据迁移 - -当数据结构发生变化时，使用迁移函数： - -```typescript -{ - name: "user-store", - version: 2, - migrate: (persistedState, version) => { - if (version === 1) { - // 从版本1迁移到版本2 - return { - ...persistedState, - newField: "default-value", - }; - } - return persistedState; - }, -} -``` - -### 3. 错误处理 - -持久化操作会自动处理错误，但可以添加自定义错误处理： - -```typescript -onRehydrateStorage: () => state => { - if (state) { - console.log("Store hydrated successfully"); - } else { - console.warn("Failed to hydrate store"); - } -}, -``` - -### 4. 存储空间管理 - -定期清理不需要的持久化数据： - -```typescript -// 检查数据大小 -const size = getPersistedDataSize("user-store", "localStorage"); -if (size > 1024 * 1024) { - // 1MB - console.warn("Persisted data is too large"); -} - -// 监控存储使用情况 -const usage = getStorageUsage("localStorage"); -if (usage.percentage > 80) { - console.warn("Storage usage is high:", usage.percentage + "%"); -} -``` - -### 5. 性能优化 - -使用批量操作提高性能： - -```typescript -// 批量设置数据 -const results = batchSetPersistedData( - { - key1: data1, - key2: data2, - key3: data3, - }, - "localStorage", -); - -// 批量获取数据 -const data = batchGetPersistedData(["key1", "key2", "key3"], "localStorage"); -``` - -### 6. 安全考虑 - -对敏感数据使用加密： - -```typescript -// 加密敏感数据 -const useSensitiveStore = createEncryptedStore( - createState, - "sensitive-store", - "your-secret-key", - partialize, -); -``` - -## 注意事项 - -1. **存储限制**: localStorage 通常有 5-10MB 限制 -2. **同步操作**: 持久化操作是同步的，避免阻塞主线程 -3. **隐私模式**: 在隐私模式下，存储可能不可用 -4. **数据安全**: 敏感数据应该加密后再存储 -5. **版本管理**: 及时更新版本号，确保数据迁移正常工作 -6. **压缩权衡**: 压缩可以减少存储空间，但会增加CPU开销 -7. **TTL设置**: 合理设置TTL，避免数据过期影响用户体验 -8. **错误恢复**: 实现错误恢复机制，处理存储失败的情况 - -## 实际应用场景 - -### 电商购物车 - -```typescript -const useCartStore = createLocalStorageStore( - createCartState, - "cart-store", - state => ({ items: state.items, total: state.total }), - { ttl: 30 * 24 * 60 * 60 * 1000 }, // 30天TTL -); -``` - -### 用户偏好设置 - -```typescript -const usePreferencesStore = createEncryptedStore( - createPreferencesState, - "preferences-store", - "user-secret-key", - state => ({ theme: state.theme, language: state.language }), -); -``` - -### 临时会话数据 - -```typescript -const useSessionStore = createTTLStore( - createSessionState, - "session-store", - 24 * 60 * 60 * 1000, // 24小时TTL - state => ({ sessionId: state.sessionId, lastActivity: state.lastActivity }), -); -``` - -### 大数据缓存 - -```typescript -const useCacheStore = createCompressedStore( - createCacheState, - "cache-store", - state => ({ data: state.data, timestamp: state.timestamp }), -); -``` diff --git a/Touchkebao/src/store/examples.ts b/Touchkebao/src/store/examples.ts deleted file mode 100644 index 99ff48ee..00000000 --- a/Touchkebao/src/store/examples.ts +++ /dev/null @@ -1,325 +0,0 @@ -// src/store/examples.ts -// 高级持久化使用示例 - -import { - createLocalStorageStore, - createSessionStorageStore, - createEncryptedStore, - createCompressedStore, - createTTLStore, - createPersistStore, -} from "./createPersistStore"; - -// 示例1: 基础localStorage持久化store -interface BasicState { - count: number; - name: string; - increment: () => void; - setName: (name: string) => void; -} - -export const useBasicStore = createLocalStorageStore( - set => ({ - count: 0, - name: "", - increment: () => set(state => ({ count: state.count + 1 })), - setName: name => set({ name }), - }), - "basic-store", - state => ({ count: state.count, name: state.name }), // 只持久化数据，不持久化方法 -); - -// 示例2: sessionStorage持久化store（会话级存储） -interface SessionState { - sessionId: string; - lastActivity: number; - updateActivity: () => void; -} - -export const useSessionStore = createSessionStorageStore( - set => ({ - sessionId: "", - lastActivity: Date.now(), - updateActivity: () => set({ lastActivity: Date.now() }), - }), - "session-store", - state => ({ sessionId: state.sessionId, lastActivity: state.lastActivity }), -); - -// 示例3: 加密持久化store（敏感数据） -interface SensitiveState { - apiKey: string; - privateData: any; - setApiKey: (key: string) => void; - setPrivateData: (data: any) => void; -} - -export const useSensitiveStore = createEncryptedStore( - set => ({ - apiKey: "", - privateData: null, - setApiKey: key => set({ apiKey: key }), - setPrivateData: data => set({ privateData: data }), - }), - "sensitive-store", - "your-secret-key-here", // 加密密钥 - state => ({ apiKey: state.apiKey, privateData: state.privateData }), -); - -// 示例4: 压缩持久化store（大数据） -interface LargeDataState { - largeArray: number[]; - largeObject: Record; - addToArray: (item: number) => void; - updateObject: (key: string, value: any) => void; -} - -export const useLargeDataStore = createCompressedStore( - set => ({ - largeArray: [], - largeObject: {}, - addToArray: item => - set(state => ({ largeArray: [...state.largeArray, item] })), - updateObject: (key, value) => - set(state => ({ largeObject: { ...state.largeObject, [key]: value } })), - }), - "large-data-store", - state => ({ largeArray: state.largeArray, largeObject: state.largeObject }), -); - -// 示例5: TTL持久化store（临时数据，自动过期） -interface TemporaryState { - tempData: any; - expiresAt: number; - setTempData: (data: any, ttlMs: number) => void; -} - -export const useTemporaryStore = createTTLStore( - set => ({ - tempData: null, - expiresAt: 0, - setTempData: (data, ttlMs) => - set({ tempData: data, expiresAt: Date.now() + ttlMs }), - }), - "temporary-store", - 24 * 60 * 60 * 1000, // 24小时TTL - state => ({ tempData: state.tempData, expiresAt: state.expiresAt }), -); - -// 示例6: 高级配置持久化store -interface AdvancedState { - complexData: { - nested: { - deep: { - value: string; - }; - }; - array: any[]; - }; - metadata: { - version: string; - createdAt: number; - updatedAt: number; - }; - updateComplexData: (data: any) => void; - updateMetadata: (metadata: any) => void; -} - -export const useAdvancedStore = createPersistStore( - set => ({ - complexData: { - nested: { - deep: { - value: "", - }, - }, - array: [], - }, - metadata: { - version: "1.0.0", - createdAt: Date.now(), - updatedAt: Date.now(), - }, - updateComplexData: data => - set(state => ({ - complexData: { ...state.complexData, ...data }, - metadata: { ...state.metadata, updatedAt: Date.now() }, - })), - updateMetadata: metadata => - set(state => ({ - metadata: { ...state.metadata, ...metadata, updatedAt: Date.now() }, - })), - }), - { - name: "advanced-store", - partialize: state => ({ - complexData: state.complexData, - metadata: state.metadata, - }), - version: 2, - migrate: (persistedState, version) => { - if (version === 1) { - // 从版本1迁移到版本2 - return { - ...persistedState, - metadata: { - version: "2.0.0", - createdAt: Date.now(), - updatedAt: Date.now(), - }, - }; - } - return persistedState; - }, - onRehydrateStorage: () => state => { - console.log("Advanced store hydrated:", state); - }, - compress: true, // 启用压缩 - ttl: 7 * 24 * 60 * 60 * 1000, // 7天TTL - }, -); - -// 示例7: 购物车持久化store（电商场景） -interface CartState { - items: Array<{ - id: string; - name: string; - price: number; - quantity: number; - }>; - total: number; - addItem: (item: any) => void; - removeItem: (id: string) => void; - updateQuantity: (id: string, quantity: number) => void; - clearCart: () => void; - calculateTotal: () => void; -} - -export const useCartStore = createLocalStorageStore( - (set, get) => ({ - items: [], - total: 0, - addItem: item => { - const state = get(); - const existingItem = state.items.find(i => i.id === item.id); - - if (existingItem) { - set({ - items: state.items.map(i => - i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i, - ), - }); - } else { - set({ items: [...state.items, { ...item, quantity: 1 }] }); - } - - get().calculateTotal(); - }, - removeItem: id => { - const state = get(); - set({ items: state.items.filter(i => i.id !== id) }); - get().calculateTotal(); - }, - updateQuantity: (id, quantity) => { - const state = get(); - set({ - items: state.items.map(i => - i.id === id ? { ...i, quantity: Math.max(0, quantity) } : i, - ), - }); - get().calculateTotal(); - }, - clearCart: () => set({ items: [], total: 0 }), - calculateTotal: () => { - const state = get(); - const total = state.items.reduce( - (sum, item) => sum + item.price * item.quantity, - 0, - ); - set({ total }); - }, - }), - "cart-store", - state => ({ items: state.items, total: state.total }), - { - ttl: 30 * 24 * 60 * 60 * 1000, // 30天TTL - }, -); - -// 示例8: 用户偏好设置store -interface PreferencesState { - theme: "light" | "dark" | "auto"; - language: string; - notifications: { - email: boolean; - push: boolean; - sms: boolean; - }; - privacy: { - shareData: boolean; - analytics: boolean; - }; - setTheme: (theme: "light" | "dark" | "auto") => void; - setLanguage: (language: string) => void; - toggleNotification: (type: keyof PreferencesState["notifications"]) => void; - updatePrivacy: (settings: Partial) => void; -} - -export const usePreferencesStore = createEncryptedStore( - set => ({ - theme: "auto", - language: "zh-CN", - notifications: { - email: true, - push: true, - sms: false, - }, - privacy: { - shareData: false, - analytics: true, - }, - setTheme: theme => set({ theme }), - setLanguage: language => set({ language }), - toggleNotification: type => - set(state => ({ - notifications: { - ...state.notifications, - [type]: !state.notifications[type], - }, - })), - updatePrivacy: settings => - set(state => ({ - privacy: { ...state.privacy, ...settings }, - })), - }), - "preferences-store", - "user-preferences-key", - state => ({ - theme: state.theme, - language: state.language, - notifications: state.notifications, - privacy: state.privacy, - }), -); - -// 使用示例 -export function useStoreExamples() { - // 基础store使用 - const basic = useBasicStore(); - - // 敏感数据store使用 - const sensitive = useSensitiveStore(); - - // 购物车store使用 - const cart = useCartStore(); - - // 偏好设置store使用 - const preferences = usePreferencesStore(); - - return { - basic, - sensitive, - cart, - preferences, - }; -}