技术问题：删除按钮为何删除全部任务而非指定单个任务？

数据老陈

2026-7-22

问题分析与修复

核心问题1：删除时传递错误的ID

子组件删除按钮触发时，传递的是task.userId（用户ID）而非待办项自身的task.id，导致所有待办项删除时都传入同一个用户ID，接口无法定位到具体要删除的待办项。若新增的本地待办项沿用同一用户ID，会直接引发“批量删除”的错觉。

修复代码（子组件）

将删除按钮的参数从task.userId改为task.id：

<template>
    <p class="content">
      {{ task.todo }}
    </p>
    <button @click="() => deleteTask(task.id)" class="delete">
      Delete
    </button>
</template>

核心问题2：删除后全量拉取服务器数据覆盖本地新增项

当前deleteTask action在删除成功后，调用getTasks重新拉取服务器待办列表，但本地新增的待办项并未同步到服务器，拉取后本地新增任务会被完全覆盖，表现为“所有新任务被删除”。

修复方案（二选一）

方案A：本地直接更新任务列表（适配前端临时新增场景）

删除成功后，直接在本地过滤掉已删除的任务，无需重新拉取服务器数据：

// Store的actions部分
async deleteTask(context, id) {
  const res = await fetch(`https://dummyjson.com/todos/${id}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json;charset=utf-8', // 修正原代码拼写错误：appication → application
    },
  });
  if (res.ok) {
    // 本地移除对应ID的任务
    context.commit('removeTask', id);
  }
  return res.ok;
},

同时补充对应的mutation：

// Store的mutations部分
export const mutations = {
  setTasks(state, data) {
    state.tasks = data;
  },
  removeTask(state, id) {
    state.tasks = state.tasks.filter(task => task.id !== id);
  }
};