安装
NPM/YARN
Shell
1$ npm i @tanstack/vue-query2# or3$ pnpm add @tanstack/vue-query4# or5$ yarn add @tanstack/vue-query想在下载之前试一下吗? 尝试基本的示例!
Vue Query 与 Vue 2.x 和 3.x 兼容。
如果你的 Vue 版本是 2.6,请保证提前设置@vue/composition-api
Vue Query 初始化
在使用 Vue Query 前,你需要通过VueQueryPlugin初始化
TypeScript
1import { VueQueryPlugin } from "@tanstack/vue-query";2 3app.use(VueQueryPlugin);<script setup>中使用 Composition API
文档中所有例子都使用了<script setup>语法。
Vue 2 用户也可以使用此插件设置该语法。 请查看对应链接,安装并正确初始化它。
如果你喜欢<script setup>语法,你也可以简单的把代码挪到setup()函数中并返回模板中需要的值,将例子翻译为通常的 Composition API 语法。
HTML
1<script setup>2 import { useQuery } from "@tanstack/vue-query";34 const { isLoading, isFetching, isError, data, error } = useQuery({5 queryKey: ["todos"],6 queryFn: getTodos,7 });8</script>9 10<template>...</template>