安装 | TanStack Query Vue Docs

安装

您可以通过 NPM 安装 Vue Query。

NPM

bash

npm i @tanstack/vue-query

npm i @tanstack/vue-query

或者

bash

pnpm add @tanstack/vue-query

pnpm add @tanstack/vue-query

或者

bash

yarn add @tanstack/vue-query

yarn add @tanstack/vue-query

或者

bash

bun add @tanstack/vue-query

bun add @tanstack/vue-query

想在下载前试用一下吗？试试 basic 示例！

Vue Query 与 Vue 2.x 和 3.x 兼容

如果您正在使用 Vue 2.6，请确保也设置了 @vue/composition-api

Vue Query 初始化

在使用 Vue Query 之前，您需要使用 VueQueryPlugin 对其进行初始化

tsx

import { VueQueryPlugin } from '@tanstack/vue-query'

app.use(VueQueryPlugin)

import { VueQueryPlugin } from '@tanstack/vue-query'

app.use(VueQueryPlugin)

在 <script setup> 中使用组合式 API

我们文档中的所有示例都使用 <script setup> 语法。

Vue 2 用户也可以使用此插件使用该语法。有关安装详细信息，请查看插件文档。

如果您不喜欢 <script setup> 语法，可以通过将代码移动到 setup() 函数下并返回模板中使用的值，轻松地将所有示例转换为普通的组合式 API 语法。

vue

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

const { isPending, isFetching, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: getTodos,
})
</script>

<template>...</template>

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

const { isPending, isFetching, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: getTodos,
})
</script>

<template>...</template>