后台拉取指示器
查询的 status === 'pending' 状态足以显示查询的初始硬加载状态，但有时你可能希望额外显示一个指示器，表明该查询正在后台重新拉取。为此，查询还为你提供了一个 isFetching 布尔值，可用于表明查询当前处于拉取状态，而无需考虑 status 变量的实际状态：
HTML
1<script setup>2import { useQuery } from '@tanstack/vue-query'34const { isPending, isFetching, isError, data, error } = useQuery({5 queryKey: ['todos'],6 queryFn: getTodos,7})8</script>9 10<template>11 <div v-if="isFetching">Refreshing...</div>12 <span v-if="isPending">Loading...</span>13 <span v-else-if="isError">Error: {{ error.message }}</span>14 <!-- We can assume by this point that `isSuccess === true` -->15 <ul v-else-if="data">16 <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>17 </ul>18</template>显示全局后台拉取加载状态
除了单个查询的加载状态外，如果你希望在任意查询（包括后台拉取）处于拉取状态时显示一个全局加载指示器，则可以使用 useIsFetching Hook：
HTML
1<script setup>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>