@tanstack/vue-query使用手册

embedded/2024/11/27 0:05:12/

1. 搭建

a. 安装
npm i @tanstack/vue-query
b. 初始化
import { VueQueryPlugin } from '@tanstack/vue-query'app.use(VueQueryPlugin)

2. 基本使用

a. 使用 useQuery 获取数据
import { useQuery } from '@tanstack/vue-query';const { data, error, isLoading, refetch } = useQuery(['data'], // Query keyasync () => {const response = await fetch('https://api.example.com/data');return response.json();});}// 假设异步函数定义在别的文件中,可以导入后再使用import { useQuery } from '@tanstack/vue-query';import { fetchData } from './api'; // 导入异步函数const { data, error, isLoading, refetch } = useQuery(['data'], // Query keyfetchData  // 引用导入的函数);// 手动重新加载数据const reload = () => {refetch();};

解释

  • useQuery 中的第一个参数 ['data'] 是查询的键(key),它唯一标识了这次请求,可以用于缓存和自动重试,也可以是一个变量,当变量发生改变会自动请求接口,用于表格翻页非常合适。
  • 第二个参数是查询函数,它会返回一个 Promise,Vue Query 会自动处理这个异步操作。
  • useQuery 返回的对象包含 data(请求的数据)、isLoading(加载状态)和 error(错误信息)
b. 使用 useMutation 提交数据
<script setup>
import { useMutation } from '@tanstack/vue-query';
import { postData } from './api'; // 导入异步函数// 创建 Mutation
const mutation = useMutation(postData);// 触发 Mutation
const submitData = () => {mutation.mutate({ name: 'Example', age: 30 }, // 提交的数据{onSuccess: (data) => {console.log('成功:', data);},onError: (error) => {console.error('失败:', error);},});
};
</script><template><button @click="submitData" :disabled="mutation.isLoading">{{ mutation.isLoading ? '提交中...' : '提交数据' }}</button>
</template>

解释

  • useMutation 接受一个异步函数作为参数,用于执行 POST 或其他修改数据的操作。
  • 通过 mutate 方法触发请求,传递的参数将传递给请求函数。
  • isLoadingerror 用来表示提交过程中的状态。

3. 参数介绍

下面展示 参数如何使用

const { data, error, isLoading } = useQuery(['data'],async () => {const response = await fetch('https://api.example.com/data');return response.json();},{staleTime: 60000, // 缓存 60 秒cacheTime: 300000, // 缓存保留时间 5 分钟retry: 2, // 重试 2 次refetchInterval: 2 * 1000, // 2s轮询一次接口enabled:true,	// 只有为true才可以发送请求refetchOnWindowFocus: true, // 窗口获得焦点时重新获取数据refetchOnReconnect: true, // 网络恢复时重新获取数据refetchIntervalInBackground: true, // 后台标签页也继续刷新(需要配合refetchInterval使用)initialData: { name: '默认数据' }, // 初始数据onSuccess: (data) => {console.log('数据获取成功:', data);},onError: (error) => {console.error('数据获取失败:', error);},}
);
a. staleTime
  • 含义:staleTime 指的是数据被认为是 “新鲜” 的时间。在这个时间范围内,Tanstack Query 不会重新请求数据,而是直接从缓存中返回。
  • 单位: 毫秒(ms)。
  • 默认值: 0(即数据会立即被标记为“过时”)。
  • 效果:
    • 如果请求的时间间隔小于 staleTime,Tanstack Query 会直接使用缓存中的数据,而不会发送新的网络请求。
    • 超过 staleTime 后,再次访问会触发重新请求。
  • 应用场景:
    • 当你知道某些数据在一段时间内不会频繁改变时,可以设置一个较长的 staleTime,避免不必要的网络请求,提高性能。
b. cacheTime
  • 含义:cacheTime 指的是缓存保留的时间,也就是数据被认为是 “非活跃” 的数据时,还能在内存中保存多久。如果超过这个时间,Tanstack Query 会将缓存清理掉。
  • 单位: 毫秒(ms)。
  • 默认值: 5 分钟(300,000 ms)。
  • 效果:
    • 即使数据在 staleTime 过期后被认为是“陈旧”的,只要还没超过 cacheTime,Tanstack Query 仍会保留它。
    • 如果用户重新访问这个查询,而缓存还未被清理,Tanstack Query 可以立即返回缓存内容,同时发起后台请求更新数据。
    • 一旦超过 cacheTime,Tanstack Query 会将缓存完全清理掉,下一次访问时将重新请求数据。
c. retry
  • 含义:retry 是控制当查询失败时,是否需要自动重试,以及重试的次数。
  • 默认值: 3(会重试 3 次)。
  • 效果:
    • 如果网络请求失败,Tanstack Query 会按照设定的次数自动重试,减少偶发性网络问题的影响。
    • 如果所有重试都失败,Tanstack Query 会将查询标记为“失败”状态。
  • 应用场景:
    • 对于短暂的网络波动,重试可以有效避免用户看到错误页面。
    • 如果后台服务不稳定且重试无意义,可以将 retry 设置为 0
  • 高级用法: 你可以通过传递一个函数来自定义是否需要重试:
retry: (failureCount, error) => {// 如果错误是网络问题并且重试少于 5 次,则继续重试if (error.isNetworkError && failureCount < 5) return true;return false;
}
d. refetchInterval
  • 含义: 指定每隔多长时间自动重新获取数据。
  • 单位: 毫秒(ms)。
  • 默认

http://www.ppmy.cn/embedded/140763.html

相关文章

WPF中如何让Textbox显示为一条直线

由于Textbox直接使用是一条直线 设置如下代码 可以让Textbox变为直线输入 <Style TargetType"TextBox"x:Key"UsernameTextBoxStyle"><Setter Property"Template"><Setter.Value><ControlTemplate TargetType"{x:Typ…

企业OA管理系统:Spring Boot技术架构与应用

3系统分析 3.1可行性分析 通过对本企业OA管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本企业OA管理系统采用SSM框架&#xff0c;JAVA作为开发语言&a…

【JavaEE】Servlet:表白墙

文章目录 一、前端二、前置知识三、代码1、后端2、前端3、总结 四、存入数据库1、引入 mysql 的依赖&#xff0c;mysql 驱动包2、创建数据库数据表3、调整上述后端代码3.1 封装数据库操作&#xff0c;和数据库建立连接3.2 调整后端代码 一、前端 <!DOCTYPE html> <ht…

基于微信小程序的空巢老人健康管理系统

摘 要 随着社会老龄化程度不断加深&#xff0c;空巢老人的健康管理成为一个日益重要的问题。为了更好地关注和管理空巢老人的健康状况&#xff0c;本文利用Spring Boot框架和MySQL数据库&#xff0c;结合微信小程序等技术&#xff0c;设计并实现了一套基于微信小程序的空巢老人…

PostgreSQL技术内幕19:逻辑备份工具pg_dump、pg_dumpall

文章目录 0.简介1. 使用方法1.1 pg_dump1.2 pg_dumpall 2.逻辑备份原理概述3.代码分析3.1 pg_dump3.2 pg_dumpall 0.简介 上一篇文章介绍了逻辑备份和物理备份概念&#xff0c;主要介绍了PG的物理备份工具&#xff0c;本文主要介绍PG逻辑备份工具g_dump和pg_dumpall&#xff0…

2024年11月21日Github流行趋势

项目名称&#xff1a;twenty 项目维护者&#xff1a;charlesBochet, lucasbordeau, Weiko, FelixMalfait, bosiraphael项目介绍&#xff1a;正在构建一个由社区支持的现代化Salesforce替代品。项目star数&#xff1a;21,798项目fork数&#xff1a;2,347 项目名称&#xff1a;p…

aws建立多区域只读库

文章目录 一、Aurora数据库创建多区域注意项&#xff1a;二、aws-rds多区域只读库建立三、cli 创建实例: 一、Aurora数据库创建多区域注意项&#xff1a; aurora数据库 开启跨区域必须是主库不低于db.r5.large规格, 目标区域規格使用db.r5.large&#xff0c;使用低于此规格的将…

MongoDB相关问题

视频教程 【GeekHour】20分钟掌握MongoDB Complete MongoDB Tutorial by Net Ninja MongoDB开机后调用缓慢的原因及解决方法 问题分析&#xff1a; MongoDB开机后调用缓慢&#xff0c;通常是由于以下原因导致&#xff1a; 索引重建&#xff1a; MongoDB在启动时会重建索引…