Vueuse 的 useInfiniteScroll 实用程序再次获取相同的项目答案

【问题标题】：useInfiniteScroll utility of Vueuse is fetching same items againVueuse 的 useInfiniteScroll 实用程序再次获取相同的项目
【发布时间】：2022-11-11 01:25:28
【问题描述】：

这是一个可重现的堆栈闪电战- https://stackblitz.com/edit/nuxt-starter-jlzzah?file=components/users.vue

怎么了？ -我的代码获取 15 个项目，并且通过底部滚动事件它应该获取另外 15 个不同的项目，但它只是再次获取相同的项目。

我已经按照这个底部视频进行了这个实现，在视频中可以，但在我的 stackblitz 代码中不行： https://www.youtube.com/watch?v=WRnoQdIU-uE&t=3s&ab_channel=JohnKomarnicki

该视频的唯一区别是他使用的是 axios，而我使用的是 nuxt 3 的 useFetch。

【问题讨论】：

标签： vue.js nuxt.js nuxtjs3 vueuse

【解决方案1】：

这不是真正的缓存问题。 useFetch 正在“冻结”API URL，您直接对字符串所做的更改将无法可靠地反映。如果要向 API URL 添加参数，请使用 useFetch 的 query 选项。此选项是反应式的，因此您可以使用 refs 并且查询将使用 refs 进行更新。或者，您可以使用提供的refresh() 方法

const limit = ref(10)
const skip = ref(20)

const { data: users, refresh: refreshUsers } = await useFetch(
  'https://dummyjson.com/users',
  {
    query:{
      limit,
      skip
    }
  }
);

//use the data object directly to access the result
console.log(users.value)

//if you want to update users with different params later, simply change the ref and the query will update
limit.value = 23

//use refresh to manually refresh the query
refreshUsers()

这会导致第一个 API 调用 http://127.0.0.1:8000/api/tasks?limit=10&skip=20，然后是第二个更新值 http://127.0.0.1:8000/api/tasks?limit=23&skip=20

您可以不理会缓存，因为它只是一种解决方法，不能可靠地工作。

正如nuxt issue 中所讨论的，查询选项还没有得到很好的记录。我在 nuxt/framework 上创建了一个拉取请求，以将其反映在文档中。请参阅下面的完整说明：

使用query 选项，您可以将搜索参数添加到您的查询中。此选项从 unjs/ohmyfetch 扩展而来，并使用 ufo 创建 URL。对象会自动字符串化。

const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{
    query: { param1, param2: 'value2' }
})

这导致https://api.nuxtjs.dev/mountains?param1=value1&param2=value2

【讨论】：

【解决方案2】：

Nuxt3 的useFetch 默认使用缓存。使用 initialCache: false 选项禁用它：

const getUsers = async (limit, skip) => {
  const { data: users } = await useFetch(
    `https://dummyjson.com/users?limit=${limit}&skip=${skip}`,
    {
      initialCache: false,
    }
  );

  //returning fetched value
  return users.value.users;
};

但是在这种情况下，您可能应该使用普通的$fetch 而不是useFetch 以避免缓存：

const getUsers = async (limit, skip) => {
  const { users } = await $fetch(
    `https://dummyjson.com/users?limit=${limit}&skip=${skip}`
  );

  //returning fetched value
  return users;
};

【讨论】：