Vue3中Axios Get请求如何传pageSize参数实现分页功能

分页失效是三个逻辑错误导致的：

• 接口请求未主动传递分页参数：当前getUser方法仅传了接口地址，没有携带page、pageSize参数，后端一直走默认值page=1、pageSize=200，如果总数据量≤200，组件计算总页数为1，自然不会显示多页分页控件
• 切页逻辑无效：pageChange方法修改的是未定义的currentPage变量，既没有更新当前页码状态，也没有触发接口重新请求，切页操作没有实际效果
• 违反Vue单向数据流规则：分页组件放在子组件内，直接修改父组件传入的props值不会同步父组件状态，还会触发框架警告

1. 改造数据请求方法，主动传递分页参数 #

修改Employee页面的getUser方法，接收页码、页大小入参，Axios Get请求通过params字段携带分页参数传给后端：

async getUser(reqPage = 1, reqPageSize = 10) {
  await this.$store.dispatch("axiosGet", {
    url: 'identity/api/employees',
    params: {
      page: reqPage,
      pageSize: reqPageSize
    }
  }).then(response => {
    if (response.status === 'error') return
    this.userList = response.data.data.data
    this.page = response.data.data.page
    this.pageSize = response.data.data.pageSize
    this.totalCount = response.data.data.totalCount
  })
},

页面初始化生命周期（created/mounted）里直接调用this.getUser()即可默认加载第一页数据，单页默认条数可以根据业务需求调整，不建议用200这类过大的值。

2. 修复分页事件的父子组件通信 #

子组件（放置分页控件的Table组件）不能直接修改props值，切页时需要向父组件抛事件通知状态变更：

// 子组件methods里的pageChange方法修改为
methods: {
  pageChange(pageNumber) {
    this.$emit('page-change', pageNumber)
  },
}

父组件（Employee页面）引用Table组件时，监听自定义的切页事件：

<TableComponent
  :user-list="userList"
  :page="page"
  :page-size="pageSize"
  :total-count="totalCount"
  @page-change="handlePageChange"
></TableComponent>

在父组件methods中新增切页处理方法，更新页码后重新拉取对应页数据：

handlePageChange(newPage) {
  this.page = newPage
  this.getUser(newPage, this.pageSize)
}

3. 校验分页组件参数 #

原有VueTailwindPagination的参数绑定逻辑基本正确，注意两个校验点：

• :total绑定的必须是后端返回的全量数据总条数，不能是当前页返回的数组长度
• :per-page绑定的单页条数必须和传给后端的pageSize值保持一致，避免组件计算总页数出错

• 打开浏览器网络面板，切页时确认接口请求Query参数中携带了正确的page、pageSize值
• 确认后端返回的totalCount是符合预期的全量数据总数，而非当前页数据量
• 如果需要支持单页条数切换，新增页大小选择器后，修改pageSize时要重置页码为1，再调用this.getUser(1, newPageSize)拉取数据

内容的提问来源于stack exchange，提问作者Sanaz Baghban