为什么 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