应封装分页和过滤逻辑为可复用组合函数：usePagination管理页码、页大小及跳转，useFilter维护过滤状态并联动重置分页；二者可整合为useListManager统一协调数据加载，配合类型约束与副作用解耦提升可维护性。
分页逻辑封装成可复用的组合函数
把分页核心状态和行为抽离为独立的 usePagination 函数，是实现复用的第一步。它应接收总条目数或 API 地址等必要参数，返回当前页码、每页数量、总页数及跳转方法。
例如：
- 用 ref 管理
currentPage和pageSize，保证响应性 - 用 computed 动态计算
totalPages，避免手动更新 - 提供
goToPage方法做边界校验（如不能小于 1 或超过总页数） - 支持传入回调函数，在页码变更后触发数据请求，解耦 UI 与请求逻辑
数据过滤逻辑统一收口在组合函数中
过滤通常涉及关键词搜索、多选条件、时间范围等，这些操作往往和分页联动。建议封装为 useFilter，内部维护一个过滤对象，并暴露更新、重置、生成查询参数的方法。
关键点包括：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 过滤字段用 reactive 包裹，便于嵌套属性响应（如
{ status: 'active', dateRange: [start, end] }） - 导出
applyFilter方法，自动触发分页重置（currentPage = 1），确保结果一致性 - 提供
toQueryParams工具方法，把过滤对象转为 URL 查询字符串或 API 请求体 - 可结合 watch 监听过滤变化，自动调用数据加载逻辑（需与分页函数协作）
两个逻辑协同：组合使用更自然
实际组件中，分页和过滤几乎总是同时存在。不建议各自独立调用，而是设计一个更高阶的组合函数，比如 useListManager，内部整合两者。
典型结构如下：
- 接收初始过滤配置和分页参数
- 内部创建
usePagination和useFilter实例 - 暴露统一的
refresh方法：先应用过滤，再重置页码，最后发起请求 - 返回
data、loading、error等共享状态，方便模板直接消费
类型安全与工程实践建议
Vue 3 的 Composition API 对 TypeScript 支持友好，应在组合函数中主动约束类型。
- 为分页函数添加泛型，如
usePagination<t>(total: number)</t>，明确返回数据结构 - 过滤函数的配置对象使用接口定义，比如
interface FilterOptions { keyword?: string; status?: string[]; } - 导出的函数名统一加
use前缀，符合 Vue 生态惯例，也利于 IDE 自动识别和提示 - 避免在组合函数内执行副作用（如直接发请求），而是把请求逻辑作为参数传入，提升可测试性
