nuxt.js - 为什么 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}`)

或提供您自己的 key :

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

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