Nuxt 3 - 如何每n分钟刷新一次获取的数据

2024-03-11

因此,在我的数据库中,数据每分钟都会刷新(数据实际上更新,我检查过),然后我在页面上显示这些数据。当我在页面之间切换以及手动刷新页面时,数据会被获取,但如果我坐在一个页面上例如 5 分钟,即使数据库中的数据更新,数据也不会在页面端刷新。

是否可以刷新获取数据(假设用户在页面上处于活动状态时每分钟刷新一次),而无需始终点击刷新按钮?

我使用 useFetch() 获取数据,但我不使用任何其他参数,因为我不需要它们。在文档中特别指出,必须更改参数才能进行刷新工作。

var {data: fixture, refresh, pending, error} = await useFetch('/api/getFixture')``

我尝试过类似的事情:

function refreshing(){
  refresh
  console.log("refreshing")
}
setInterval(() => refreshing(), 10000);

该函数被执行,但数据没有刷新,因为如果我理解正确的话,参数没有变化,对吗? 我也尝试使用:

refreshNuxtData()

应该再次“执行”获取,但也没有运气。

感谢你并致以真诚的问候,


这是我的Github 仓库 https://github.com/kissu/so-setIntervalNuxt3托管应用程序 https://venerable-kelpie-2828bc.netlify.app/在 Netlify 上。

我正在使用的代码

<script setup>
import { useIntervalFn } from '@vueuse/core' // VueUse helper, install it

const { pending, data, error, refresh } = await useFetch('https://jsonplaceholder.typicode.com/todos/1')

useIntervalFn(() => {
  console.log(`refreshing the data again ${new Date().toISOString()}`)
  refresh() // will call the 'todos' endpoint, just above
}, 3000) // call it back every 3s
</script>

<template>
  <div v-if="!pending">
    <pre>{{ data }}</pre>
  </div>
</template>

这些是我在 Netlify 上使用的设置

正如您在控制台 + 网络选项卡中看到的那样,该应用程序运行正常

不确定什么对你不起作用,但这是在 Nuxt3 中使用 setInterval 的实际方法。


如果你想强制刷新,你可以用一行来完成(使用useFetch's refresh)

<button @click="refresh">force</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Nuxt 3 - 如何每n分钟刷新一次获取的数据 的相关文章

随机推荐

  • Android 12 上的 PendingIntent.FLAG_UPDATE_CURRENT 错误

    在我的应用程序中 我计划在每天的特定时间设置闹钟 为此 我正在使用警报管理器 请参阅下面的代码 这在 12 以下的 Android 设备上运行良好 但在 12 及更高版本上则不行 Firebase Crashlytics 上出现错误 以 S
  • 如何用CGPathAddCurveToPoint创建一个完美的半圆?

    我正在尝试使用 CGPathAddCurveToPoint 创建一个半径为 15 点的完美右半圆 如下所示 CGPathMoveToPoint path NULL 0 0 CGPathAddCurveToPoint path NULL 15
  • Google Chrome 扩展程序可在用户点击后关闭通知

    Chrome 扩展程序运行良好 我的问题是通知会在 7 秒后关闭 我想让用户点击关闭通知 function engine var latestId var ids var messages var newmessage get http l
  • git merge:将更改应用于移动到不同文件的代码

    我现在正在尝试一个非常强大的 git merge 操作 我遇到的一个问题是 我对分支中的某些代码进行了一些更改 但我的同事将该代码移动到了他分支中的新文件中 所以当我这样做的时候git merge my branch his branch
  • 使用 strptime() 解析日期/时间字符串时如何保留时区?

    我有一个来自 Blackberry IPD 备份的 CSV 转储文件 是使用 IPDDump 创建的 这里的日期 时间字符串看起来像这样 在哪里EST是澳大利亚时区 Tue Jun 22 07 46 22 EST 2010 我需要能够在 P
  • Arduino从SD卡读取最后一行

    我对 Arduino 业务还很陌生 如何从 SD 卡读取最后一行 通过以下代码片段 我可以读取第一行 n 之前的所有字符 现在我想添加一个 向后 声明 或其他内容 到目前为止我的代码 include
  • 寻找 Wii 兼容的 Javascript Flash mp3 播放器

    我正在寻找一款能够在 Wii 上基于 Opera 的浏览器中运行的 flash mp3 播放器 播放器需要启用 javascript 支持播放 停止等方法 mp3 曲目列表将使用与播放器相同的页面上的 ajax 动态构建 因此当曲目完成播放
  • Android:在 Android 设备选择器中,同一设备会出现多次

    我正在使用 Eclipse 为 Android 操作系统编程 我使用真实设备来测试我的应用程序 为了测试我的应用程序 我单击 运行 然后单击我想要运行的目标项目 然后弹出 Android 设备选择器 我可以在其中选择要运行该应用程序的设备或
  • 脚本标签中的文本属性 - 澄清?

    在阅读 Angular 的指令代码时 我看到this https github com angular angular js blob master src ng directive script js L43 var scriptDire
  • SVG 在视网膜屏幕上作为边框图像

    请考虑我们有简单的 SVG 文件 其中包含圆角半径等于 10 的圆角矩形的代码
  • Delphi通用约束问题

    我正在尝试创建一个与 tiOPF delphi www tiopf com 的对象持久框架 一起使用的通用列表类 具体来说 我试图采用现有的泛型类 TtiObjectList 并制作一个使用 TtiObject 后代的泛型版本 我更改基类的
  • prolog中输入/输出参数的区别

    Prolog谓词定义中的输入和输出参数有什么区别吗 这与其他语言 例如Scheme 和C 相比如何 我希望我理解你的问题 您应该研究一下 Prolog 中如何实现统一 因为它会让事情变得更清晰 反正 简而言之 没有内置方法可以将 Prolo
  • 为什么我不能在类上下文中引用 DATA?

    在 Ruby 中 存储静态文本真的很方便 END 通过任意使用DATAIO对象 puts DATA read Prints This is the stuff END This is the stuff 然而 当我尝试从新类的上下文中引用
  • JavaScript 可以捕获语法错误吗?

    MDN 状态 https developer mozilla org en US docs Web JavaScript Reference Global Objects SyntaxError 当 JavaScript 引擎在解析代码时遇
  • 如何在父级中绑定子用户控件数据上下文

  • 在 R 的 JAGS 或 BUGS 中指定离散威布尔分布

    我使用 R 中的 JAGS 将威布尔模型拟合到离散值 将威布尔模型拟合到连续数据没有问题 但当我切换到离散值时 我遇到了麻烦 以下是在 JAGS 中拟合威布尔模型的一些数据和代码 draw data from a weibull distr
  • C++ 变量声明语法

    我最近遇到了这个结构 整数 米 这似乎相当于 整数米 奇怪的是 我以前从未见过这个特殊的成语 有人可以给我指出一个参考资料 我可以在其中阅读相关规范 或者直接解释一下吗 这也适用于直 C 吗 谢谢 困惑的开发者 这不是一个 习语 它只是一对
  • 使用数据注释进行模型验证的错误消息

    给定以下课程 using System ComponentModel DataAnnotations public class Book public Contact PrimaryContact get set public Contac
  • React JS 不支持 Html“align”属性

    我是 ReactJS 的新手 在反应组件中 我已经 var SaveOrganization React createClass render function return div align center a href addVenue
  • Nuxt 3 - 如何每n分钟刷新一次获取的数据

    因此 在我的数据库中 数据每分钟都会刷新 数据实际上更新 我检查过 然后我在页面上显示这些数据 当我在页面之间切换以及手动刷新页面时 数据会被获取 但如果我坐在一个页面上例如 5 分钟 即使数据库中的数据更新 数据也不会在页面端刷新 是否可