Nuxt3组件v-for循环中删除加载状态全局同步问题求助

你的useDbDelete composable存在设计问题：里面的pending、error、result是直接声明在模块顶层的全局共享变量。由于JS模块的加载机制是单例模式，所有组件导入这个composable时，拿到的都是同一个ref实例。

这就导致只要有一个NoteCard调用dbDelete把pending.value改成true，所有组件里的pendingDelete（本质是同一个全局ref）都会同步变化，最终所有卡片的删除按钮都变成加载状态。

把useDbDelete改成工厂函数，每次调用时创建独立的状态变量，让每个NoteCard实例都拥有自己的pending、error状态：

// useDbDelete.js
export default function useDbDelete() {
  const pending = ref(false);
  const error = ref(null);
  const result = ref(null);

  const dbDelete = async (endpoint, id) => {
    pending.value = true;
    error.value = null; // 每次删除前重置错误状态
    result.value = null;
    
    try {
      await $fetch(`/api/${endpoint}/${id}/delete`, {
        method: "DELETE",
      });
      result.value = "Success";
    } catch (err) {
      error.value = err.message;
    } finally {
      pending.value = false; // 用finally确保请求结束后必重置pending
    }
  };

  return { dbDelete, result, pending, error };
}

接着修改NoteCard里的调用方式，需要执行函数来获取当前组件的独立状态：

// in script setup of NoteCard
const { dbDelete, pending: pendingDelete, error } = useDbDelete(); // 这里要加()调用函数

const deleteNote = async () => {
  await dbDelete("notes", props.note.id);
  if (!error.value) {
    emit("deleted");
  }
};

• 用finally块替代直接在try/catch后设置pending.value = false，避免请求失败时pending一直处于true状态
• 每次调用dbDelete前重置error和result，防止上次操作的残留状态干扰当前操作

内容的提问来源于stack exchange，提问作者plantsplantsplants