开发工具

欢呼吧，Vue Query 附带了专用的 devtools！🥳

在开始 Vue Query 之旅时，您会想要这些 devtools 伴您左右。它们有助于可视化 Vue Query 的所有内部工作原理，如果您陷入困境，可能会为您节省数小时的调试时间！

对于 Chrome、Firefox 和 Edge 用户：有第三方浏览器扩展可用于直接在浏览器 DevTools 中调试 TanStack Query。这些扩展提供了与框架特定开发者工具包相同的功能

• Chrome Devtools
• Firefox Devtools
• Edge Devtools

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

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' 时包含在包中，因此您无需担心在生产构建中排除它们。

Devtools 将作为固定、浮动元素挂载到您的应用程序中，并在屏幕角落提供一个切换按钮来显示和隐藏 devtools。此切换状态将在 localStorage 中存储和记住，并在重新加载时保留。

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

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

<template>
  <h1>The app!</h1>
  <VueQueryDevtools />
</template>

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

<template>
  <h1>The app!</h1>
  <VueQueryDevtools />
</template>

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

Vue Query 将无缝集成到 官方 Vue devtools 中，并添加自定义检查器和时间轴事件。Devtool 代码默认将从生产包中进行树摇。

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

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

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

devtools 的 v6 和 v7 版本都受支持。