Vueuse useInfiniteScroll工具重复获取相同数据问题求助

问题分析 #

你遇到的重复获取数据问题，核心原因是Nuxt 3 的 useFetch 默认开启了请求缓存机制——当请求的 URL/参数未发生变化时，它会直接返回缓存数据，不会发起新请求。而你参考的视频中用的 Axios 没有这类自动缓存逻辑，因此不会出现重复数据的问题。另外如果页码参数没有正确绑定为响应式并传入请求，也会导致每次请求的都是第一页数据。

修复方案 #

1. 绑定响应式页码到请求参数

定义响应式页码，将其作为查询参数传入 useFetch，确保页码变化时请求 URL 同步更新：

<script setup>
const page = ref(1)
const limit = 15
// 存储所有加载完成的用户数据
const allUsers = ref([])

const { data: newUsers, pending } = useFetch('https://jsonplaceholder.typicode.com/users', {
  query: {
    _limit: limit,
    _page: page // 绑定响应式页码，确保参数变化触发新请求
  },
  // 可选：如果仍存在缓存残留，直接禁用缓存
  cache: false,
  // 或者自定义唯一缓存key，每个页码对应独立缓存
  key: `users-page-${page.value}`
})

// 每次获取新数据后，追加到总列表中
watch(newUsers, (newData) => {
  if (newData) {
    allUsers.value = [...allUsers.value, ...newData]
  }
}, { immediate: true })
</script>

2. 正确处理滚动加载逻辑

在 useInfiniteScroll 的回调中，先更新页码，同时避免重复请求（比如上一次请求还在加载时不触发新请求）：

<script setup>
const target = ref(null)

useInfiniteScroll(target, async () => {
  // 防止请求并发重复触发
  if (pending.value) return
  // 更新页码，触发useFetch发起新请求
  page.value++
  // 等待响应式更新生效
  await new Promise(resolve => setTimeout(resolve, 0))
}, { distance: 10 })
</script>

<template>
  <div ref="target" class="user-list">
    <div v-for="user in allUsers" :key="user.id" class="user-item">
      {{ user.name }}
    </div>
    <div v-if="pending" class="loading">加载中...</div>
  </div>
</template>

关键注意点

• 不要直接用 useFetch 返回的 data 作为列表数据源，要单独维护一个总数据数组（比如 allUsers）来追加每次请求的新数据。
• 必须保证 page 是响应式状态，且作为查询参数传入 useFetch，这样页码变化才能触发新请求。
• 如果缓存问题依旧存在，直接设置 cache: false 禁用 useFetch 的缓存功能即可。

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