安装
您可以通过 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
想在下载之前试用一下吗？试试基本示例！
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> 使用 Composition API
我们文档中的所有示例都使用 <script setup> 语法。
Vue 2 用户也可以使用 这个插件 来使用该语法。请查看插件文档以获取安装详细信息。
如果您不喜欢 <script setup> 语法，您可以轻松地将所有示例转换为普通的 Composition API 语法，方法是将代码移动到 setup() 函数下，并返回模板中使用的值。
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>
