自定义客户端
自定义客户端
Vue Query 允许为 Vue 上下文提供自定义的 QueryClient。
当你需要提前创建 QueryClient，以便将其集成到无法访问 Vue 上下文的其他库中时，这会非常有用。
因此，VueQueryPlugin 接受 QueryClientConfig 或 QueryClient 作为插件选项。
如果你提供了 QueryClientConfig，则 QueryClient 实例将在内部创建，并提供给 Vue 上下文。
TypeScript
1const vueQueryPluginOptions: VueQueryPluginOptions = {2 queryClientConfig: {3 defaultOptions: { queries: { staleTime: 60 * 60 * 1000 } },4 },5}6app.use(VueQueryPlugin, vueQueryPluginOptions)TypeScript
1const myClient = new QueryClient(queryClientConfig)2const vueQueryPluginOptions: VueQueryPluginOptions = {3 queryClient: myClient,4}5app.use(VueQueryPlugin, vueQueryPluginOptions)自定义上下文键
你还可以自定义 QueryClient 在 Vue 上下文中可被访问的键名。当同一页面上存在多个 Vue 2 应用、需要避免命名冲突时，这会很有用。
该功能既适用于默认的 QueryClient，也适用于自定义的 QueryClient。
TypeScript
1const vueQueryPluginOptions: VueQueryPluginOptions = {2 queryClientKey: 'Foo',3}4app.use(VueQueryPlugin, vueQueryPluginOptions)TypeScript
1const myClient = new QueryClient(queryClientConfig)2const vueQueryPluginOptions: VueQueryPluginOptions = {3 queryClient: myClient,4 queryClientKey: 'Foo',5}6app.use(VueQueryPlugin, vueQueryPluginOptions)要使用在自定义键下注册的客户端，请通过 useQueryClient 获取它，并将其作为第二个参数传入。
JavaScript
1useQuery(2 {3 queryKey: ['query1'],4 queryFn: fetcher,5 },6 useQueryClient('Foo'),7)开发者工具（devtools）会在默认键下查找客户端，因此你也需通过 client 属性将客户端传给它们。
HTML
1<script setup>2import { useQueryClient } from '@tanstack/vue-query'3import { VueQueryDevtools } from '@tanstack/vue-query-devtools'45const queryClient = useQueryClient('Foo')6</script>7 8<template>9 <VueQueryDevtools :client="queryClient" />10</template>在内部，自定义键会作为后缀与默认查询键组合。但用户无需关心此细节。
TypeScript
1const vueQueryPluginOptions: VueQueryPluginOptions = {2 queryClientKey: 'Foo',3}4app.use(VueQueryPlugin, vueQueryPluginOptions) // -> VUE_QUERY_CLIENT:Foo