vue3如何设置分页·

在Vue 3中，设置分页通常会涉及到组件化的开发，你可以使用Vuex（状态管理库）来管理当前页数、总页数以及数据列表。以下是基本步骤：

1. **创建状态**: 在Vuex store中定义状态，如`currentPage`, `totalPages`, 和 `itemsPerPage`（每页显示的项目数），初始化为默认值。

import { defineStore } from 'pinia';

export const usePagination = defineStore('pagination', {
  state: () => ({
    currentPage: 1,
    totalPages: 0,
    itemsPerPage: 10,
  }),
  // 更多actions和mutations...
});

2. **响应式更新**: 当用户翻页或改变每页大小时，通过mutations更新这些状态，并触发视图更新。

mutations: {
  setCurrentPage(state, page) {
    state.currentPage = page;
  },
  setTotalPages(state, totalPages) {
    state.totalPages = totalPages;
  },
  updateItemsPerPage(state, value) {
    state.itemsPerPage = value;
  },
}

3. **在组件中监听状态变化**: 使用mapGetters获取并映射到props，然后在模板里展示分页组件。例如，使用vue-router的`router-link`来创建链接。

<template>
  <div>
    <!-- ...其他内容 -->
    <ul>
      <li v-for="page in getPaginatedPages" :key="page">
        <router-link :to="{ query: { page } }">{{ page }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { mapState } from 'vuex';
const { currentPage, totalPages } = usePagination();
const getPaginatedPages = computed(() => Array.from({ length: totalPages }, (_, i) => i + 1));
</script>

4. **分页逻辑**: 在组件内部处理实际的分页请求，比如从API获取数据时，可以根据当前页数和每页大小来请求对应的页面数据。

methods: {
  async fetchData(page) {
    const response = await yourApiCall({
      currentPage,
      pageSize: this.itemsPerPage,
    });
    // 更新store的状态
    this.$store.commit('setCurrentPage', page);
    this.$store.commit('setTotalPages', response.totalPages);
    // 处理返回的数据...
  }
}