如何在Vue3中使用数据分页功能来显示从后端获取的大量数据？

在Vue3中使用数据分页功能显示大量数据通常涉及以下几个步骤：

1. **状态管理**:
- 定义一个状态（例如在Vuex或自定义hooks中）来存储数据、当前页数（currentPage）和每页显示的数量（perPage）。初始时，数据应为空数组，页数设为1。

2. **分页函数**:
- 编写一个方法，用于向后端发送分页请求。传入起始索引（startIndex）和结束索引（endIndex），根据当前页数和每页数量计算这两个值。这可以封装成一个action，在Vuex中触发，或者直接在组件内使用。

// 使用Vuex
actions: {
  fetchPagedData({ commit }, params) {
    axios.get('/api/data?page=' + params.page + '&limit=' + params.per_page)
      .then(response => {
        commit('updateData', response.data.data);
        commit('updatePagination', response.data.meta.total_pages);
      })
      .catch(error => console.error('Error fetching data:', error));
  }
}

// 或者直接在组件内
methods: {
  fetchData(page) {
    // ...类似axios的请求
  }
}

3. **响应式数据绑定**:
- 使用`mapGetters`获取Vuex中的数据和分页状态。在模板中，动态渲染数据列表和分页控件。

<template>
  <div>
    <ul v-for="item in paginatedData.slice(page - 1, page * perPage)" :key="item.id">
      <li>{{ item.name }}</li>
    </ul>
    <!-- 分页导航 -->
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { mapState } from 'vuex';

const { pagination, data } = mapState(['currentPage', 'data']);

// 初始化分页组件
onMounted(() => {
  fetchData(pagination.currentPage);
});

const paginatedData = computed(() => {
  return data.slice((pagination.currentPage - 1) * pagination.perPage, pagination.currentPage * pagination.perPage);
});

const prevPage = () => {
  if (pagination.currentPage > 1) {
    fetchData(pagination.currentPage - 1);
  }
};

const nextPage = () => {
  if (pagination.currentPage < pagination.totalPages) {
    fetchData(pagination.currentPage + 1);
  }
};
</script>

4. **分页事件**:
- 实现按钮的点击事件，调用相应的分页方法，更新当前页数并加载新的数据。