安装
您可以通过 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> 语法，可以通过将代码移至 setup() 函数下并返回模板中使用的值，轻松地将所有示例转换为普通的 Composition 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>
