新建useQueryPage.ts

import {ref, watch} from 'vue'
// 这里使用二次封装的axios useRequest hook
//这里自己实现 
import useRequest from './useRequest'
//定义options 类型
type Options = {
    url:string,
    params?: Record<string, any>,
    limit?:number
}
// 这里使用get请求，
const { getAction } = useRequest()

export default function useQueryPage<T>(options: Options) {
    //定义分页所需参数，
    // page、limit、pages以及total根据后台返回不同而不同
    const loading = ref(false)
    const url = ref(options.url)
    const page = ref(0)
    const pages = ref(0)
    const limit = ref(options.limit||10)
    const total = ref(0)
    const list = ref<Array<T>>([])
    //分页查询操作
    const handleQueryPage = async () => {
        loading.value = true
        list.value = []
        //这里使用自己封装的axios
        const res = await getAction(url.value, { page: page.value, limit: limit.value, ...options.params||{} });
        if (res.success) {
            total.value = res.data.total
            limit.value = res.data.limit
            page.value = res.data.current
            list.value = res.data.records
            pages.value = res.data.pages
            loading.value = false
        }
    }

    handleQueryPage()
    //监听page变化
    watch(page, () => {
        handleQueryPage()
    })
     //监听limit变化
    watch(limit, () => {
        handleQueryPage()
    })

    return {
        //把页面所需要的参数返回
        page, limit, pages, total, list, handleQueryPage, loading  
    }
}

新建组件，使用useQueryPage

//导入useQueryPage
import useQueryPage from '@/hooks/useQueryPage'

// 定义类型 
type AchieveRrcord = {
    id:string
    name:string
    createTime?:string
}
//分页查询请求接口
const url = '/achieveRecord/queryPage'

//查询参数
const params = reactive({
    name: ''
})

//使用useQueryPage hook
const { page, pages, limit, total, list, handleQueryPage, loading } = useQueryPage<AchieveRrcord>({url, params})

在模板中使用

<div>
        <p>
            <input type="text" v-model="params.name">
            <button v-margin="'0 0 0 10px'" @click="handleQueryPage">query achieve record</button>
        </p>
        <div>
            <template  v-if="!loading">
                <template v-if="list.length > 0">
                    <p v-for="item in list" :key="item.id">
                        <span>{{item.name}} {{item.createTime}}</span>
                    </p>
                </template>
                <template v-else>
                    <h2 v-align="'center'" v-margin="'100px 0'">当前条件下未查询到数据...</h2>
                </template>
            </template>  
            <template v-else>
                <h2 v-align="'center'" v-margin="'100px 0'">Loading ...</h2>
            </template>
        </div>
        <p v-align="'center'">
            <span>总共:{{total}}条</span>
            <span v-margin="'0 0 0 10px'">
                第<input v-margin="'0 4px'" v-width="'40px'" type="number" v-model="page">页
            </span>
            <span v-margin="'0 0 0 10px'">
                每页<input v-margin="'0 4px'" v-width="'40px'" type="number" v-model="limit">条
            </span>
            <span v-margin="'0 0 0 10px'">
                总共{{pages}}页
            </span>
        </p>
    </div>

运行效果

GIF 2022-3-29 下午 05-53-52.gif