将分页参数添加到Vue中的axios

import axios from 'axios';

data() {
  return {
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页显示的数据条数
    totalItems: 0, // 总数据条数
    dataList: [] // 存储获取到的数据
  };
},

methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        pageSize: this.pageSize
      }
    })
    .then(response => {
      this.dataList = response.data.data;
      this.totalItems = response.data.total;
    })
    .catch(error => {
      console.error(error);
    });
  }
},

created() {
  this.fetchData();
}

<template>
  <div>
    <!-- 展示数据 -->
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- 分页组件 -->
    <pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total-items="totalItems"
      @page-change="currentPage = $event; fetchData()"
    ></pagination>
  </div>
</template>