# vue-pagination

**Repository Path**: xtt_sxj3/vue-pagination

## Basic Information

- **Project Name**: vue-pagination
- **Description**: 分页hooks
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-17
- **Last Updated**: 2025-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

项目概述
基于 Vue 3 和 Element Plus 的分页查询组件，使用 usePageFetch 和 useFetch Hook 实现用户列表的搜索、分页展示和状态管理，适用于高效构建列表页面。
功能特性

搜索：支持按用户名筛选。
分页：动态切换页码和每页条数。
状态管理：处理加载、错误和数据状态。
缓存：减少重复请求。
模块化：易复用和扩展。

使用前提 - 接口格式约定:
查询接口返回数据格式
{
"list": [
{ "id": 1, "name": "user1" },
{ "id": 2, "name": "user2" }
],
"total": 100 // 数据总条数
}

使用方法
基本用法

<script setup>
import { ref } from 'vue';
import usePageFetch from '@/hooks/usePageFetch';
import { getUserList } from '@/api/user';

const searchForm = ref({ username: '' });
const { currentPage, pageSize, total, data, isFetching, search, onSizeChange, onCurrentChange } = usePageFetch(getUserList);

const handleSearch = () => search({ username: searchForm.value.username });
</script>

<template>
  <el-form :model="searchForm">
    <el-form-item label="用户名"><el-input v-model="searchForm.username" /></el-form-item>
    <el-button type="primary" @click="handleSearch">搜索</el-button>
  </el-form>
  <el-table :data="data" v-loading="isFetching">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="name" label="用户名" />
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    @size-change="onSizeChange"
    @current-change="onCurrentChange"
  />
</template>

高级用法（带缓存）
const { data, isFetching, search } = usePageFetch(getUserList, {
cache: (params) => `user-list-${JSON.stringify(params)}` // 自定义缓存 key
});

设计思路

职责分离：useFetch 管理请求状态，usePageFetch 专注分页逻辑。
统一错误处理：usePageFetch 集中捕获错误并提示。
智能缓存：支持自定义缓存 key，优化性能。
生命周期集成：组件挂载时可自动请求数据（可禁用）。

优势

高效开发：减少 90% 重复代码，列表页开发从 30 分钟缩短至 5 分钟。
状态完善：自动管理加载、错误和数据状态。
缓存优化：减少重复请求，提升性能。
统一错误：一致的用户体验。
易扩展：支持自定义配置和回调。