Vue查询

Vue中用于获取、缓存和更新异步数据的钩子。

支持Vue 2。x通过 vue-demi

文档

访问 https://tanstack.com/query/latest/docs/vue/overview

快速的特点

• 传输/协议/后端无关的数据获取（REST, GraphQL, promises，等等！）
• 自动缓存+重新获取（stale-while-revalidate, Window Refocus, Polling/Realtime）
• 并行+相关查询
• 突变+响应式查询重取
• 多层缓存+自动垃圾收集
• 分页+基于游标的查询
• Load-More +无限滚动查询w/滚动恢复
• 请求取消
• (实验) 悬念 + Fetch-As-You-Render查询预取
• （实验性）SSR支持
• 专用Devtools
• （取决于导入的特性）

快速入门

1. 安装 vue-query

   $ npm i @tanstack/vue-query
   

   或者

   $ pnpm add @tanstack/vue-query
   

   或者

   $ yarn add @tanstack/vue-query
   

   或者

   $ bun add @tanstack/vue-query
   

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

2. 初始化 Vue查询 通过 VueQueryPlugin

   import { createApp } from 'vue'
   import { VueQueryPlugin } from '@tanstack/vue-query'
   
   import App from './App.vue'
   
   createApp(App).use(VueQueryPlugin).mount('#app')
   

3. 使用查询

   import { defineComponent } from 'vue'
   import { useQuery } from '@tanstack/vue-query'
   
   export default defineComponent({
     name: 'MyComponent',
     setup() {
       const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })
   
       return {
         query,
       }
     },
   })
   

4. 如果您需要动态更新查询上的选项，请确保将它们作为响应变量传递

   const id = ref(1)
   const enabled = ref(false)
   
   const query = useQuery({
     queryKey: ['todos', id],
     queryFn: () => getTodos(id),
     enabled,
   })