分页

1const { data: images } = await useFetch(
2  () => `?key=${apiKey}&q=${searchTerm.value}&page=1&per_page=10`,
3  {
4    baseURL: baseUrl,
5  }
6);

1Math.ceil(images?.value?.total / imagesPerPage.value);

1export const useImageData = () => useState("image-data", () => []);
2export const useDisplayImages = () => useState("display-images", () => []);
3// 用于存储分页相关数据的常量：
4export const useNumberOfPages = () => useState("number-of-pages", () => 0);
5export const useImagesPerPage = () => useState("images-per-page", () => 20);
6export const useCurrentPageNumber = () => useState("current-page", () => 1);

1export default function useSearch() {
2  const displayImages = useDisplayImages();
3  const imageData = useImageData();
4  // 1. 从状态中获取三个变量：
5  const numberOfPages = useNumberOfPages();
6  const imagesPerPage = useImagesPerPage();
7  const currentPageNumber = useCurrentPageNumber();
8
9  const config = useRuntimeConfig();
10  const apiKey = config.public.pixabayApiKey;
11  const baseUrl = "https://pixabay.com/api/";
12
13  const searchTerm = ref("");
14
15  const { data: images } = useFetch(
16    // 2. 将当前页码和每页显示数量添加到查询字符串中
17    () =>
18      `?key=${apiKey}&q=${searchTerm.value}&page=${currentPageNumber.value}&per_page=${imagesPerPage.value}`,
19    {
20      baseURL: baseUrl,
21    }
22  );
23
24  function setImageData() {
25    displayImages.value = [];
26    imageData.value = images?.value?.hits;
27    displayImages.value = images?.value?.hits;
28    // 3. 在新搜索完成后设置总页数
29    numberOfPages.value = Math.ceil(images?.value?.total / imagesPerPage.value);
30  }
31
32  watch(images, setImageData);
33
34  return { searchTerm };
35}