@tanstack/vue-query分页查询时isLoading状态始终为false求助

你遇到的问题根源在于启用了keepPreviousData: true，这个配置会让Vue Query在切换分页时保留上一页的数据。此时isLoading仅会在第一次发起查询时变为true，后续分页切换过程中，因为Query认为已有可用的旧数据，不会再触发isLoading状态。

要在分页切换时正确显示加载spinner，需要结合isFetching和isPreviousData两个状态判断：

• isFetching：表示当前是否有请求正在进行
• isPreviousData：表示当前展示的是上一页的旧数据

修改后的状态判断示例 #

<template>
  <CustomTable :data="data?.items">
    <!-- 在表格中插入加载spinner -->
    <template #loading>
      <Spinner v-if="isFetching && isPreviousData" />
    </template>
  </CustomTable>
</template>

<script setup lang="ts">
// 你的原有代码
const getData = async (page: Ref<number>): Promise<PaginationData<User>> => {
    const response = await ApiService.get("/api/users", {
        page: page.value,
    });
    return response.data;
};
const queryClient = useQueryClient();

const { isLoading, isError, data, error, isFetching, isPreviousData } =
    useQuery({
        queryKey: ["pagination", currentPage],
        queryFn: () => getData(currentPage),
        keepPreviousData: true,
        queryClient,
    });
</script>

额外检查项 #

• 确认currentPage是响应式变量（用ref或reactive声明），否则queryKey不会更新，Query无法触发新请求
• 如果首次加载时isLoading也为false，检查Query初始化前是否已有缓存数据（可通过queryClient.getQueryData(["pagination", 1])查看），这种情况可通过initialData配置或强制刷新解决

内容的提问来源于stack exchange，提问作者M Muqiit Faturrahman