为什么 useFetch 无法在客户端 nuxt3 中进行页面更改？

Question

我刚刚开始学习 nuxtjs （有一些 vue.js 经验），我遇到了以下问题：

我有一个简单的

todo-[id].vue

页面。它应该从 API 获取待办事项并在页面上呈现：

<script setup>
import Section from '~~/components/UI/containers/section.vue';
import ButtonLink from '~~/components/UI/buttons/button-link.vue';

const route = useRoute()
const todoId = parseInt(route.params.id)
const { data: todo } = await useFetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`)
</script>

<template>
  <Section>
    <div class="mt-4 flex space-x-4">
      <ButtonLink :to="{name: 'todo-id', params: {id: todoId - 1}}" type="secondary" v-show="todoId !== 1">previous</ButtonLink>
      <ButtonLink :to="{name: 'todo-id', params: {id: todoId + 1}}">next</ButtonLink>
    </div>
    <div class="mt-6">
      <p class="text-lg" :class="[todo.completed ? 'text-green-600' : 'text-red-600']">{{ todo.title }} (#{{ todo.id }})</p>
    </div>
  </Section>
</template>

它在服务器端工作正常，但是当我单击

next

按钮时，它不会调用 API 来获取下一个项目，页面的 url 正在更改。客户端调用API应该怎么做？我记得它在 vue.js 中运行良好

Answer 1

useFetch

尝试为您缓存文档，并在您加载下一页时重用缓存。为了避免这种行为，您可以传递函数而不是字符串：

useFetch(() => `https://jsonplaceholder.typicode.com/todos/${todoId}`)

或提供您自己的密钥：

useFetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`, { key: `todo:${todoId}` })

文档：https://v3.nuxtjs.org/api/composables/use-fetch

Answer 2

来自nuxt3的useFetch文档：

watch：观看反应源以自动刷新。

此外，我目前必须将

key

和

initialCache: false

设置为 useFetch 以确保每次进入页面时都会运行 fetch。

Answer 3

就我而言，使用 Nuxt 3 我添加了：

server: false

useFetc:h Source 使用 SSR 友好的 API 端点获取数据 可组合。

默认情况下，useFetch 会获取服务器上的数据。

https://nuxt.com/docs/api/composables/use-fetch