Vue Query 如何为多应用同页场景注入自定义 QueryClient 和自定义 queryClientKey【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query当同一页面里挂多个 Vue 应用文档中给出的典型场景是 Vue 2 同页多应用时两个应用通过默认上下文键注入的QueryClient会互相冲突。Vue Query 提供了两个配合使用的选项来解决它queryClient选项让你在应用挂载前自行创建QueryClient并注入queryClientKey选项让你自定义QueryClient在 Vue 上下文中存放的键从而避免多应用之间的键名冲突。本文基于 Vue Query 官方文档说明这条注入路径适用于 Vue 2.x / 3.x 环境Vue Query 同时兼容这两个大版本若使用 Vue 2.6还需按文档说明额外安装vue/composition-api。前提安装与默认初始化先确认tanstack/vue-query已安装。文档给出的安装命令任选其一npm i tanstack/vue-query # 或 pnpm add tanstack/vue-query # 或 yarn add tanstack/vue-query # 或 bun add tanstack/vue-query默认初始化不需要传任何选项例如 basic 示例 中的用法import { createApp } from vue import { VueQueryPlugin } from tanstack/vue-query createApp(App).use(VueQueryPlugin).mount(#app)多应用同页场景下需要把VueQueryPlugin的选项对象扩展成queryClientqueryClientKey的组合下面是具体做法。步骤一注入自定义 QueryClientVue Query 允许向 Vue 上下文提供自定义QueryClient。文档说明的适用原因是你需要提前创建QueryClient把它交给无法访问 Vue 上下文的其他库去使用。此时VueQueryPlugin接受两种形式的插件选项queryClientConfig传入配置对象QueryClient实例由插件内部创建然后提供给 Vue 上下文queryClient直接传入一个已经创建的QueryClient实例。多应用同页属于需要提前持有实例的场景应使用第二种形式。文档给出的注入方式queryClientConfig为new QueryClient的配置对象const myClient new QueryClient(queryClientConfig) const vueQueryPluginOptions: VueQueryPluginOptions { queryClient: myClient, } app.use(VueQueryPlugin, vueQueryPluginOptions)对照插件源码 vueQueryPlugin.ts 可以看到分支逻辑install时如果选项里存在queryClient就直接使用该实例否则才用queryClientConfig没有则用undefined新建一个QueryClient。非服务端环境下插件还会调用client.mount()并在应用卸载时执行client.unmount()等清理。步骤二用 queryClientKey 避免同页多应用的键名冲突文档明确指出可以自定义QueryClient在 Vue 上下文中可访问的键这在同一页面多个 Vue 2 应用之间避免命名冲突时是有用的该选项对默认QueryClient和自定义QueryClient都生效。在步骤一的基础上追加queryClientKey即可const myClient new QueryClient(queryClientConfig) const vueQueryPluginOptions: VueQueryPluginOptions { queryClient: myClient, queryClientKey: Foo, } app.use(VueQueryPlugin, vueQueryPluginOptions)页面内另一个应用则用不同的queryClientKey例如Bar两个应用各自注入、各自隔离。注意文档示例中键值为字符串Foo这是示例值实际取什么名字由你按应用自行区分文档没有约定其他格式。自定义键在内部会与默认的 query key 以后缀方式拼接文档明确说明用户不需要关心这个细节并给出示例const vueQueryPluginOptions: VueQueryPluginOptions { queryClientKey: Foo, } app.use(VueQueryPlugin, vueQueryPluginOptions) // - VUE_QUERY_CLIENT:Foo即插件内部实际使用的上下文键形如VUE_QUERY_CLIENT:Foo文档标注为示例结果。这一点也可以从源码得到印证install里通过getClientKey(options.queryClientKey)计算最终键见 vueQueryPlugin.ts。步骤三组件内按自定义键访问 QueryClient注入完成后组件里要访问对应应用的QueryClient需要把自定义键显式传进去文档给出两个入口。入口一useQuery的 query options 中传queryClientKey。文档示例useQuery({ queryKey: [query1], queryFn: fetcher, queryClientKey: foo, })这里queryClientKey的值必须与插件注册时使用的值对应queryFn是文档示例中的取数函数替换为你自己的请求函数即可。入口二useQueryClient(id)。useQueryClient 参考文档 说明当设置了多个使用不同queryClientKey的VueQueryPlugin实例时用id参数选择要使用哪个注入的QueryClient返回值就是注入的QueryClient实例如果上下文中找不到任何实例则抛出异常。import { useQueryClient } from tanstack/vue-query const queryClient useQueryClient(id?: string)注意该 hook 只能用在有注入上下文的地方源码测试 useQueryClient.test.ts 表明在 setup 函数之外调用会抛出错误vue-query hooks can only be used inside setup() function or functions that support injection context.。如何验证注入正确文档没有给出专用的命令行检查手段可用的验证点都来自上述行为定义两个应用各自使用不同的queryClientKey挂载后同一queryKey如[query1]的查询数据互不串用——这正是隔离的预期效果在组件中调用useQueryClient(Foo)应返回你在步骤一传入的myClient如果上下文中不存在对应实例按文档描述会直接抛错而不是静默回退若useQueryClient在 setup 外被调用出现的报错文本是vue-query hooks can only be used inside setup() function or functions that support injection context.说明调用位置不对而不是注入失败。限制与边界文档将自定义上下文键避免多应用冲突的场景描述为面向 Vue 2 的同页多应用Vue 3 单页单应用通常不需要该选项。queryClientKey对默认注入和自定义QueryClient都生效但组件侧必须显式把相同的键传给useQuery/useQueryClient不能依赖默认键自动找到自定义实例。插件选项的两种形式二选一即可传queryClient时实例由你负责创建和配置传queryClientConfig时插件内部创建实例。源码类型定义为VueQueryPluginOptions ConfigOptions | ClientOptions见 vueQueryPlugin.ts。更完整的 hook 返回字段见 useQuery 参考文档本文不重复展开。延伸阅读Custom Client 指南本文全部选项与示例的出处。Installation 文档安装命令、Vue 版本兼容范围与VueQueryPlugin初始化要求。basic 示例标准初始化的完整main.ts参考。【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考