Nuxt 3的useFetch在刷新期间发送相同的请求而不是更新URL

Question

我尝试做一件简单的事情：在路线更改时，重新获取数据。

这是我的链接：

<li v-for="category in categories" :key="category.id" class="mb-1">
  <NuxtLink :to="{ query: { cat: category.slug } }">
    {{category.title}}
  </NuxtLink>
</li>

还有我的要求：

<script setup>
const route = useRoute()

const { data:categories } = await useFetch('http://127.0.0.1:8000/api/tasks/category/', {
  key: route.fullPath, 
  initialCache: false
})
const { data:tasks, refresh } = await useFetch(`http://127.0.0.1:8000/api/tasks/?cat=${route.query.cat}`, {
  key: `tasks:${route.query.cat}`, 
  initialCache: false
})

watch(() => route.query.cat, () => refresh())

</script>

因此，点击时，url 会发生很大的变化：

http://localhost:3000/tasks?cat=category1
http://localhost:3000/tasks?cat=category3
http://localhost:3000/tasks?cat=category2

但请求是相同的（来自 Django DRF 后端）：

GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1

看起来它保留了第一类，即使initialCache: false

Answer 1

useFetch如果“冻结”API URL，则您直接对字符串所做的更改将不会反映出来。如果您想向 API URL 添加参数，作为使用函数的替代方法，您可以使用query的选项useFetch。此选项是反应性的，即当路线的参考发生变化时，查询将反映此更新。

对于您的情况，这将起作用：

const cat = ref('your_value')

const { data:tasks, refresh } = await useFetch('http://127.0.0.1:8000/api/tasks', {
  query: { cat }
})

这导致http://127.0.0.1:8000/api/tasks?cat=your_value

您无需弄乱密钥选项，因为密钥将自动生成，并且您也可以不理会缓存。

查询选项尚未详细记录，如本nuxt 问题中所述。我在 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