禁用/暂停查询 Disabling/Pausing Queries

如果要禁用自动运行的查询，则可以使用enabled = false选项。

当 enabled 是 false时：

如果查询已缓存了数据
- 查询将以status === 'success'或isSuccess的状态进行初始化
如果查询没有缓存的数据
- 查询将以status === 'loading'和fetchStatus === 'idle'的状态进行初始化
该查询不会在挂载时自动获取数据
该查询不会自动在后台重新获取数据
该查询将忽略查询客户端的invalidateQueries和refetchQueries调用，这些调用通常会导致查询重新获取数据
从useQuery返回的refetch可用于手动触发查询以进行数据获取

HTML

1<script setup>2import { useQuery } from '@tanstack/vue-query'34const { isInitialLoading, isError, data, error, refetch, isFetching } =5  useQuery({6    queryKey: ['todos'],7    queryFn: fetchTodoList,8    enabled: false,9  })10</script>11 12<template>13  <button @click="refetch">Fetch Todos</button>14  <span v-if="isIdle">Not ready...</span>15  <span v-else-if="isError">Error: {{ error.message }}</span>16  <div v-else-if="data">17    <span v-if="isFetching">Fetching...</span>18    <ul>19      <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>20    </ul>21  </div>22</template>

永久性地禁用一个查询会使你失去 Vue Query 所提供的许多优秀的功能（如后台的重新请求），而且这也不是一种自然的方式。它把你从声明性的方法（定义查询应该何时运行的依赖关系）带入了命令性的模式（每当我点击这里时就会获取）。它也不可能传递参数给refetch。很多时候，你想要的可能只是一个惰性查询：

惰性查询

enabled选项不仅可以用来永久禁用一个查询，还可以让你在稍晚的时候启用或者禁用它。一个很好的例子是一个带过滤器的表单，你只想在用户输入了一个用于过滤的关键词后才发起第一次请求：

HTML

1<script setup>2import { useQuery } from '@tanstack/vue-query'34const filter = ref('')5const isEnabled = computed(() => !!filter.value)6const { data } = useQuery({7  queryKey: ['todos', filter],8  queryFn: () => fetchTodos(filter),9  // ⬇️ 只要filter是空的，就禁用10  enabled: isEnabled,11})12</script>13 14<template>15  <span v-if="data">Filter was set and data is here!</span>16</template>

isInitialLoading

惰性查询一开始就会处于status: 'loading'的状态，因为它的真实加载时机不确定且它的确暂时没有数据。由于我们目前没有获取任何数据（因为enabled已被禁用），这意味着你很有可能没法使用这个字段来显示一个“正在加载”的样式。

如果你禁用了自动运行的查询或者使用了惰性查询，你可以选择使用isInitialLoading字段。这是一个派生的标志，是由部分内容计算出来的：isLoading && isFetching

所以只有当查询正在进行第一次获取时，它才会为真。