useIsFetching
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;否则将使用 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>