Vue 3组合式函数统一管理分页状态与逻辑：封装currentPage、pageSize、total、loading、list等响应式状态，提供fetchList、handlePageChange、handleSizeChange、resetQuery等方法，通过注入API函数实现跨页面复用，并处理路由参数读取、页码重置、loading异常恢复及接口字段映射等边界问题。
Vue 3 组合式函数管理分页查询，核心是把「当前页、每页条数、总条数、加载态、数据列表」这些状态和「请求接口、切换页码、修改页长、重置查询」这些逻辑统一收口，避免在每个页面重复声明和维护。
封装关键状态：用 ref + reactive 集中持有
分页状态不能散落在 setup 里，要集中初始化并保持响应性：
-
基础参数：用
ref管理可变且需触发更新的值，如currentPage、pageSize、total -
数据与状态：表格数据建议用
ref([])或reactive({ list: [], loading: false })，确保后续赋值仍响应 -
查询参数：把搜索条件、排序字段等也纳入同一对象（如
queryParams），方便整体传参和重置
封装通用行为：函数返回可直接调用的方法
行为不是写在 methods 里，而是作为返回值暴露，让组件按需调用：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
fetchList()：统一发起请求，自动携带currentPage、pageSize和queryParams -
handlePageChange(page)：更新currentPage并立即调用fetchList() -
handleSizeChange(size)：更新pageSize，同时重置currentPage = 1（避免跳页异常） -
resetQuery()：清空搜索条件，并重置分页回第 1 页，再拉一次数据
对接接口：通过参数注入，不耦合具体 API
组合式函数本身不写死请求地址，而是接收一个函数类型的参数：
立即学习“前端免费学习笔记（深入）”；
- 定义形如
listApi: (params: any) => Promise<{ list: any[], total: number }>的选项 - 调用时传入项目中已封装好的 API 方法，例如
api.getUserList或http.post('/user/search') - 这样同一个
usePagination可用于用户页、订单页、日志页，完全解耦
适配实际场景：处理常见边界问题
真实业务中容易出错的地方，要在组合函数里提前兜住：
- 首次加载时，
currentPage应从路由 query（如pageNum）或 localStorage 中读取，而非硬写 1 - 切换
pageSize后必须重置currentPage，否则可能请求第 5 页但只显示 5 条，导致空白 - 请求开始设
loading = true，结束用finally置为false，防止异常后 loading 卡死 - 接口返回字段若不统一（如有的叫
data.total，有的叫meta.count），可在组合函数内做映射或由调用方传解析函数
