译零 TransZero · TanStack Query 中文文档
主站

useIsFetching

更新于 2026-11-02 Vue 查看英文原文 ↗
TypeScript
1function useIsFetching(fetchingFilters?: UseIsFetchingFilters, queryClient?: QueryClient): Ref<number>;

定义于:packages/vue-query/src/useIsFetching.ts:55

useIsFetching 组合式函数返回一个 ref,指向你的应用当前正在加载或后台拉取(fetching)的 number 数量(适用于全应用范围的加载指示器)。

fetchingFilters 可以是普通对象、MaybeRefDeep 或响应式 getter(() => ({ ... }));若过滤条件本身依赖其他响应式状态,请传入 getter。

参数

fetchingFilters?

UseIsFetchingFilters = {}

用于缩小匹配查询范围的 QueryFilters。

queryClient?

QueryClient

使用此参数可指定自定义 QueryClient;否则将使用 VueQueryPlugin 提供的默认实例。

返回值

Ref<number>

一个 ref,指向你的应用当前正在加载或后台拉取的 number 数量。

示例

HTML
1<script setup lang="ts">2import { useIsFetching } from '@tanstack/vue-query'34// How many queries matching the posts prefix are fetching?5const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })6</script>7 8<template>9  <span v-if="isFetchingPosts">Refreshing posts...</span>10</template>

适用于任意后台拉取的查询(不仅限于当前屏幕内显示的查询)的全局加载指示器:

HTML
1<script setup lang="ts">2import { useIsFetching } from '@tanstack/vue-query'34const isFetching = useIsFetching()5</script>6 7<template>8  <div v-if="isFetching">Queries are fetching in the background...</div>9</template>

本页为 TanStack Query 文档(Vue 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de