Nuxt 3 useFetch反应性/观察

Question

我真的不明白Nuxt及其获取数据和反应性的方法是如何工作的。

我有一个使用useFetch从API检索数据的页面，在页面中我有直接更新该反应性数据的输入。最重要的是，我在调用修补程序api来更新值的输入上有@blur。

我有点困惑，为什么每次使用useFetch时都会调用这个修补程序api。如果我将useAsyncData与$fetch结合使用，则不会发生这种情况。那不是一样吗？提供了代码示例。那么，如果我使用useFetch而useAsyncData工作正常，那么为什么补丁api会在每一笔(而不是在模糊上)触发呢？

在下面提供的代码示例中，修补程序useFetch是有问题的，但是注释的代码工作得很好。

<script setup lang="ts">
const { data } = await useFetch<Project>(`/api/projects/${route.params.id}`);

// const { execute: update } = await useAsyncData(async () => {
//   await $fetch<Project>(`/api/projects/${route.params.id}`, {
//     method: "PATCH",
//     body: data.value,
//   });
// });
const { execute: update } = await useFetch(`/api/projects/${route.params.id}`, {
  method: "PATCH",
  body: data.value,
});
</script>

<template>
  <div v-if="data" class="flex items-stretch px-6 py-4 h-[calc(100vh_-_66px)]">
    <textarea
      v-if="data.notes"
      v-model="data.notes"
      rows="5"
      class="textarea textarea-primary w-full resize-none"
      placeholder="Enter your notes"
      @blur="update()"
    ></textarea>
  </div>
</template>

Answer 1

好了找到解决办法了。data.value对象正在被监视以进行更改，并且它正在与v-model一起发生变化。

解决问题的办法：

const updateNotes = async () => {
  await $fetch(`/api/projects/${route.params.id}`, {
    method: "PATCH",
    body: data.value,
  });
};