开发者工具

挥手欢呼吧，因为 Vue Query 自带了专门的开发者工具！🥳

当您开始 Vue Query 之旅时，您会希望这些开发者工具在您身边。它们有助于可视化 Vue Query 的所有内部工作原理，如果您遇到困难，它们可能会为您节省数小时的调试时间！

对于 Google Chrome 用户：有一个第三方 Chrome 扩展程序可用于直接在 Chrome 开发者工具中调试 TanStack Query。它提供与特定于框架的开发者工具包相同的功能。在此处查看：TanStack Query DevTools

您可以使用专用包将开发者工具组件直接集成到您的页面中。 基于组件的开发者工具使用与框架无关的实现，并且始终保持最新。

开发者工具组件是一个独立的包，您需要安装它：

npm i @tanstack/vue-query-devtools

npm i @tanstack/vue-query-devtools

或者

pnpm add @tanstack/vue-query-devtools

pnpm add @tanstack/vue-query-devtools

或者

yarn add @tanstack/vue-query-devtools

yarn add @tanstack/vue-query-devtools

或者

bun add @tanstack/vue-query-devtools

bun add @tanstack/vue-query-devtools

默认情况下，Vue Query Devtools 仅在 process.env.NODE_ENV === 'development' 时包含在捆绑包中，因此您无需担心在生产构建期间排除它们。

开发者工具将作为固定浮动元素挂载到您的应用程序中，并在屏幕一角提供一个切换按钮以显示和隐藏开发者工具。此切换状态将存储在 localStorage 中并在重新加载后记住。

将以下代码尽可能高地放置在您的 Vue 应用程序中。它离页面根部越近，效果就越好！

<script setup>
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
</script>

<template>
  <h1>应用程序！</h1>
  <VueQueryDevtools />
</template>

<script setup>
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
</script>

<template>
  <h1>应用程序！</h1>
  <VueQueryDevtools />
</template>

• initialIsOpen: Boolean
  • 如果希望开发者工具默认打开，请将此项设置为 true。
• buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  • 默认为 bottom-right。
  • 用于打开和关闭开发者工具面板的 React Query 徽标的位置。
• position?: "top" | "bottom" | "left" | "right"
  • 默认为 bottom。
  • React Query 开发者工具面板的位置。
• client?: QueryClient
  • 使用此选项可使用自定义 QueryClient。否则，将使用最近上下文中的 QueryClient。
• errorTypes?: { name: string; initializer: (query: Query) => TError}
  • 使用此选项可预定义一些可以在查询中触发的错误。当从 UI 中切换该错误时，将调用初始化程序（使用特定查询）。它必须返回一个 Error。
• styleNonce?: string
  • 使用此选项可将 nonce 传递给添加到文档头部的样式标签。如果您使用内容安全策略 (CSP) nonce 来允许内联样式，则此选项很有用。
• shadowDOMTarget?: ShadowRoot
  • 默认行为会将开发者工具的样式应用于 DOM 中的 head 标签。
  • 使用此选项可将 shadow DOM 目标传递给开发者工具，以便样式将应用于 shadow DOM 内部，而不是 light DOM 中的 head 标签内部。

Vue Query 将与官方 Vue 开发者工具无缝集成，添加自定义检查器和时间线事件。 默认情况下，开发者工具代码将从生产捆绑包中进行摇树优化。

要使其正常工作，您只需在插件选项中启用它：

app.use(VueQueryPlugin, {
  enableDevtoolsV6Plugin: true,
})

app.use(VueQueryPlugin, {
  enableDevtoolsV6Plugin: true,
})

支持 v6 和 v7 版本的开发者工具。