Vueuse的useInfiniteScroll实用程序再次获取相同的项
这里是一个可复制的堆栈闪电战- https://stackblitz.com/edit/nuxt-starter-jlzzah?file=components/users.vue
出了什么问题？
我已经跟踪了这个实现的底部视频，它在视频中是可以的，但是在我的stackblitz代码中是不行的：channel=JohnKomarnicki
这个视频唯一的不同之处在于，他使用的是axios，而我使用的是nuxt 3的useFetch。
回答 2
Stack Overflow用户
发布于 2022-11-04 20:51:33
Nuxt3 3的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;
};Stack Overflow用户
发布于 2022-11-05 10:31:37
这其实不是缓存问题。useFetch“冻结”了API，直接对字符串所做的更改将无法可靠地反映出来。如果要向API添加参数，请使用query选项useFetch。此选项是反应性的，因此您可以使用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。
您可以不使用缓存，因为它只是一种解决方法，不能可靠地工作。
更新现在更新useFetch()文档，如下所述。
查询选项还没有很好的文档化，正如在这个nuxt问题中所讨论的那样。我在nuxt/framework上创建了一个拉请求，以便将其反映在文档中。请参阅下文的详细说明：
使用query选项，可以将搜索参数添加到查询中。此选项从unjs/ohmyfetch中扩展，并使用不明飞行物创建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¶m2=value2
https://stackoverflow.com/questions/74322310
复制相似问题
腾讯云开发者
