@tanstack/vue-query使用手册

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 key
      async () => {
        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 key
      fetchData  // 引用导入的函数
    );

    // 手动重新加载数据
    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 方法触发请求，传递的参数将传递给请求函数。
• isLoading 和 error 用来表示提交过程中的状态。

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）。
• 默认

原文地址：https://blog.csdn.net/m0_62323931/article/details/144024827

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！