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 的选项
• 调用时传入项目中已封装好的 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），可在组合函数内做映射或由调用方传解析函数

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！