分页查询

<script setup lang="ts">
import { ref, Ref } from 'vue'
import { useQuery } from '@tanstack/vue-query'

const fetcher = (page: Ref<number>) =>
  fetch(
    `https://jsonplaceholder.typicode.com/posts?_page=${page.value}&_limit=10`,
  ).then((response) => response.json())

const page = ref(1)
const { isLoading, isError, data, error, isFetching, isPreviousData } =
  useQuery({
    queryKey: ['projects', page],
    queryFn: () => fetcher(page),
    keepPreviousData: true,
  })
const prevPage = () => {
  page.value = Math.max(page.value - 1, 1)
}
const nextPage = () => {
  if (!isPreviousData.value) {
    page.value = page.value + 1
  }
}
</script>

<template>
  <h1>Posts</h1>
  <p>当前页码: {{ page }} | 上一个数据: {{ isPreviousData }}</p>
  <button @click="prevPage">上一页</button>
  <button @click="nextPage">下一页</button>
  <div v-if="isLoading">加载中...</div>
  <div v-else-if="isError">出现错误：{{ error }}</div>
  <div v-else-if="data">
    <ul>
      <li v-for="item in data" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>