admin-vben5/playground/src/views/demos/features/vue-query/paginated-queries.vue

52 lines
1.4 KiB
Vue
Raw Normal View History

<script setup lang="ts">
import type { IProducts } from './typing';
import { type Ref, ref } from 'vue';
import { keepPreviousData, useQuery } from '@tanstack/vue-query';
import { Button } from 'ant-design-vue';
const LIMIT = 10;
const fetcher = async (page: Ref<number>): Promise<IProducts> => {
const res = await fetch(
`https://dummyjson.com/products?limit=${LIMIT}&skip=${(page.value - 1) * LIMIT}`,
);
return res.json();
};
const page = ref(1);
const { data, error, isError, isPending, isPlaceholderData } = useQuery({
// The data from the last successful fetch is available while new data is being requested.
placeholderData: keepPreviousData,
queryFn: () => fetcher(page),
queryKey: ['products', page],
});
const prevPage = () => {
page.value = Math.max(page.value - 1, 1);
};
const nextPage = () => {
if (!isPlaceholderData.value) {
page.value = page.value + 1;
}
};
</script>
<template>
<div class="flex gap-4">
<Button size="small" @click="prevPage">上一页</Button>
<p>当前页: {{ page }}</p>
<Button size="small" @click="nextPage">下一页</Button>
</div>
<div class="p-4">
<div v-if="isPending">加载中...</div>
<div v-else-if="isError">出错了: {{ error }}</div>
<div v-else-if="data">
<ul>
<li v-for="item in data.products" :key="item.id">
{{ item.title }}
</li>
</ul>
</div>
</div>
</template>