Nuxt3 实现页面活跃时自动定时刷新获取的数据

核心问题分析 #

你之前调用refresh或refreshNuxtData()无效的主要原因是useFetch默认启用了缓存机制，即使触发刷新，也会直接返回缓存数据而非重新请求后端。要实现自动刷新，需要先禁用缓存，再结合定时器和用户活跃状态来触发刷新。

步骤1：修改useFetch配置禁用缓存 #

调整useFetch的参数，确保每次请求都拉取最新数据：

const { data: fixture, refresh, pending, error } = await useFetch('/api/getFixture', {
  cache: 'no-store', // 完全禁用缓存，强制每次请求都访问后端
  initialCache: false // 可选：避免初始请求的缓存影响后续刷新
})

步骤2：添加自动刷新逻辑 #

结合页面可见性（判断用户是否在当前页面）和定时器，实现每分钟自动刷新：

let refreshTimer = null

// 触发刷新的逻辑，仅当页面可见时执行
const triggerRefresh = () => {
  if (document.visibilityState === 'visible') {
    refresh()
  }
}

onMounted(() => {
  // 页面加载后立即执行一次刷新（可选）
  triggerRefresh()
  // 每分钟执行一次刷新
  refreshTimer = setInterval(triggerRefresh, 60 * 1000)
})

// 组件卸载时清除定时器，避免内存泄漏
onUnmounted(() => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
  }
})

进阶：精准判断用户活跃状态 #

如果需要更严格的“用户活跃”判断（比如检测鼠标移动、键盘输入），可以添加以下逻辑，仅当用户有操作时才刷新：

let refreshTimer = null
let activityTimeout = null
const isUserActive = ref(true)

// 重置用户活跃状态的定时器
const resetActivityStatus = () => {
  isUserActive.value = true
  clearTimeout(activityTimeout)
  // 30秒无操作则标记为不活跃
  activityTimeout = setTimeout(() => {
    isUserActive.value = false
  }, 30000)
}

// 触发刷新的逻辑
const triggerRefresh = () => {
  if (document.visibilityState === 'visible' && isUserActive.value) {
    refresh()
  }
}

onMounted(() => {
  // 监听用户操作事件
  window.addEventListener('mousemove', resetActivityStatus)
  window.addEventListener('keydown', resetActivityStatus)
  
  // 初始化活跃状态
  resetActivityStatus()
  // 启动自动刷新定时器
  refreshTimer = setInterval(triggerRefresh, 60 * 1000)
})

onUnmounted(() => {
  // 清理事件监听和定时器
  window.removeEventListener('mousemove', resetActivityStatus)
  window.removeEventListener('keydown', resetActivityStatus)
  clearTimeout(activityTimeout)
  clearInterval(refreshTimer)
})

额外注意事项 #

• 检查你的API接口/api/getFixture是否设置了Cache-Control等缓存头，如果有，需要后端调整为不缓存或短缓存，避免浏览器缓存响应。
• 如果使用Nuxt的SSR模式，确保服务器端的缓存配置不会影响前端的刷新请求。

内容的提问来源于stack exchange，提问作者Lolek