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

VueQueryPlugin

更新于 2026-11-02 Vue 查看英文原文 ↗
TypeScript
1const VueQueryPlugin: object;

定义于:packages/vue-query/src/vueQueryPlugin.ts:75

该插件将 QueryClient 安装到 Vue 应用中,使其可通过 useQueryClient 在所有后代组件中使用——这是 Vue 版本的 React QueryClientProvider,但以应用级插件形式接入,而非通过包裹式组件。

类型声明

install

TypeScript
1install: (app: any, options: VueQueryPluginOptions) => void;

参数

app

any

options?

VueQueryPluginOptions = {}

返回值

void

示例

TypeScript
1import { createApp } from 'vue'2import { VueQueryPlugin } from '@tanstack/vue-query'3 4const app = createApp(App)5app.use(VueQueryPlugin)

传入你自己构建的 queryClient —— 这在服务端渲染(SSR)场景下很有用,因为每个请求都需要一个全新的 QueryClient;或者当你需要在 Vue 组件之外也使用同一个 QueryClient 实例时:

TypeScript
1import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'2 3const queryClient = new QueryClient()4app.use(VueQueryPlugin, { queryClient })

或者传入 queryClientConfig,让插件为你创建 QueryClient 实例,并应用你指定的默认配置:

TypeScript
1app.use(VueQueryPlugin, {2  queryClientConfig: {3    defaultOptions: { queries: { staleTime: 5 * 1000 } },4  },5})

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

译自上游 59d11de