/** * 状态管理示例代码(Pinia Store) * 展示项目中状态管理的编写规范和最佳实践 */ import { defineStore } from 'pinia'; import { ref, computed } from 'vue'; import { getUserList, createUser, updateUser, deleteUser, type User, type UserParams } from '@/api/user'; /** * 用户管理 Store * 使用 Composition API 风格定义 Store */ export const useUserStore = defineStore('user', () => { /** * 状态定义(使用 ref) */ // 用户列表 const userList = ref([]); // 当前用户 const currentUser = ref(null); // 加载状态 const loading = ref(false); // 搜索关键词 const searchKeyword = ref(''); // 分页信息 const pagination = ref({ current: 1, size: 10, total: 0, }); // 选中的用户ID列表 const selectedUserIds = ref([]); // 错误信息 const error = ref(null); /** * 计算属性 */ // 是否全选 const isAllSelected = computed(() => { return userList.value.length > 0 && selectedUserIds.value.length === userList.value.length; }); // 是否部分选中 const isIndeterminate = computed(() => { return selectedUserIds.value.length > 0 && selectedUserIds.value.length < userList.value.length; }); // 选中的用户列表 const selectedUsers = computed(() => { return userList.value.filter(user => selectedUserIds.value.includes(user.id)); }); // 正常状态用户数 const activeUserCount = computed(() => { return userList.value.filter(user => user.status === 0).length; }); // 禁用状态用户数 const inactiveUserCount = computed(() => { return userList.value.filter(user => user.status === 1).length; }); /** * 异步操作(Actions) */ // ✅ 获取用户列表 /** * 获取用户列表 * @param params 搜索参数 */ const fetchUserList = async (params?: UserParams) => { loading.value = true; error.value = null; try { const result = await getUserList(params); userList.value = result.data; pagination.value = { current: result.page, size: result.size, total: result.total, }; // 清空选中状态 selectedUserIds.value = []; return result; } catch (err: any) { error.value = err.message || '获取用户列表失败'; console.error('获取用户列表失败:', err); throw err; } finally { loading.value = false; } }; // ✅ 创建用户 /** * 创建用户 * @param data 用户数据 */ const createNewUser = async (data: any) => { loading.value = true; error.value = null; try { const newUser = await createUser(data); // 添加到列表开头 userList.value.unshift(newUser); return newUser; } catch (err: any) { error.value = err.message || '创建用户失败'; console.error('创建用户失败:', err); throw err; } finally { loading.value = false; } }; // ✅ 更新用户 /** * 更新用户信息 * @param data 用户数据 */ const updateUserInfo = async (data: any) => { loading.value = true; error.value = null; try { const updatedUser = await updateUser(data); // 更新列表中的用户 const index = userList.value.findIndex(user => user.id === data.id); if (index !== -1) { userList.value[index] = updatedUser; } return updatedUser; } catch (err: any) { error.value = err.message || '更新用户失败'; console.error('更新用户失败:', err); throw err; } finally { loading.value = false; } }; // ✅ 删除用户 /** * 删除用户 * @param id 用户ID */ const removeUser = async (id: number) => { loading.value = true; error.value = null; try { await deleteUser(id); // 从列表中移除 userList.value = userList.value.filter(user => user.id !== id); // 移除选中状态 selectedUserIds.value = selectedUserIds.value.filter(userId => userId !== id); } catch (err: any) { error.value = err.message || '删除用户失败'; console.error('删除用户失败:', err); throw err; } finally { loading.value = false; } }; // ✅ 批量删除用户 /** * 批量删除用户 * @param ids 用户ID列表 */ const batchRemoveUsers = async (ids: number[]) => { loading.value = true; error.value = null; try { // 这里应该调用批量删除 API // await batchDeleteUsers(ids); // 模拟批量删除 for (const id of ids) { await deleteUser(id); } // 从列表中移除 userList.value = userList.value.filter(user => !ids.includes(user.id)); // 清空选中状态 selectedUserIds.value = []; } catch (err: any) { error.value = err.message || '批量删除失败'; console.error('批量删除失败:', err); throw err; } finally { loading.value = false; } }; // ✅ 切换用户状态 /** * 切换用户状态 * @param id 用户ID */ const toggleUserStatus = async (id: number) => { const user = userList.value.find(u => u.id === id); if (!user) return; const newStatus = user.status === 0 ? 1 : 0; try { await updateUser({ id, status: newStatus }); // 更新本地状态 user.status = newStatus; } catch (err: any) { error.value = err.message || '状态切换失败'; console.error('状态切换失败:', err); throw err; } }; // ✅ 刷新用户列表 /** * 刷新用户列表(使用当前搜索条件) */ const refreshUserList = () => { return fetchUserList({ keyword: searchKeyword.value, page: pagination.value.current, size: pagination.value.size, }); }; /** * 同步操作(Actions) */ // ✅ 设置当前用户 /** * 设置当前用户 * @param user 用户信息 */ const setCurrentUser = (user: User | null) => { currentUser.value = user; }; // ✅ 设置搜索关键词 /** * 设置搜索关键词 * @param keyword 关键词 */ const setSearchKeyword = (keyword: string) => { searchKeyword.value = keyword; }; // ✅ 设置分页 /** * 设置分页信息 * @param page 页码 * @param size 每页数量 */ const setPagination = (page: number, size?: number) => { pagination.value.current = page; if (size) { pagination.value.size = size; } }; // ✅ 全选/取消全选 /** * 切换全选状态 */ const toggleSelectAll = () => { if (isAllSelected.value) { selectedUserIds.value = []; } else { selectedUserIds.value = userList.value.map(user => user.id); } }; // ✅ 选择/取消选择用户 /** * 切换用户选择状态 * @param userId 用户ID */ const toggleUserSelection = (userId: number) => { const index = selectedUserIds.value.indexOf(userId); if (index === -1) { selectedUserIds.value.push(userId); } else { selectedUserIds.value.splice(index, 1); } }; // ✅ 清空选中状态 /** * 清空所有选中状态 */ const clearSelection = () => { selectedUserIds.value = []; }; // ✅ 清空错误信息 /** * 清空错误信息 */ const clearError = () => { error.value = null; }; // ✅ 重置状态 /** * 重置 Store 状态 */ const resetState = () => { userList.value = []; currentUser.value = null; selectedUserIds.value = []; searchKeyword.value = ''; pagination.value = { current: 1, size: 10, total: 0, }; error.value = null; loading.value = false; }; /** * 返回状态和方法 */ return { // 状态 userList, currentUser, loading, searchKeyword, pagination, selectedUserIds, error, // 计算属性 isAllSelected, isIndeterminate, selectedUsers, activeUserCount, inactiveUserCount, // 异步操作 fetchUserList, createNewUser, updateUserInfo, removeUser, batchRemoveUsers, toggleUserStatus, refreshUserList, // 同步操作 setCurrentUser, setSearchKeyword, setPagination, toggleSelectAll, toggleUserSelection, clearSelection, clearError, resetState, }; }); /** * 其他 Store 示例 */ // ✅ 主题管理 Store export const useThemeStore = defineStore('theme', () => { const theme = ref<'light' | 'dark'>('light'); const primaryColor = ref('#4a90ff'); const setTheme = (newTheme: 'light' | 'dark') => { theme.value = newTheme; }; const setPrimaryColor = (color: string) => { primaryColor.value = color; }; return { theme, primaryColor, setTheme, setPrimaryColor, }; }); // ✅ 购物车 Store(参考现有项目) export const useCartStore = defineStore('cart', () => { const items = ref([]); const total = ref(0); const addItem = (product: any) => { // 添加商品到购物车逻辑 items.value.push(product); calculateTotal(); }; const removeItem = (productId: string) => { items.value = items.value.filter(item => item.id !== productId); calculateTotal(); }; const calculateTotal = () => { total.value = items.value.reduce((sum, item) => sum + item.price, 0); }; return { items, total, addItem, removeItem, }; });