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

Question

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

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

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

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

我尝试过类似的事情：

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

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

refreshNuxtData()

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

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

Answer 1

这是我的Github 存储库和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 的实际方法。

如果你想强制刷新，你可以用一行来完成（使用useFetchs refresh）

<button @click="refresh">force</button>