Vue Todo应用添加任务后无法实时渲染数据的求助

问题核心原因 #

1. 接口调用后未同步前端状态：addToDo函数执行新增任务的接口请求后，虽然调用了getAllToDo重新获取数据，但并没有将返回的最新任务列表更新到组件的state.toDo中，导致页面无法感知数据变化。
2. 异步操作未正确处理：原addToDo是异步操作，但组件内的addTodo方法没有等待接口请求完成就直接清空输入框，且未处理接口返回的新数据。

具体修复步骤 #

1. 改造HandleApi.ts中的addToDo函数，使其返回Promise并支持获取最新任务列表

将addToDo改为异步函数，确保接口请求完成后能返回最新的任务数据：

import axios from "axios-typescript";

const baseUrl = "http://localhost:5000";

export const getAllToDo = async () => {
  try {
    const { data } = await axios.get(baseUrl);
    console.log("Type of data received:", typeof data);
    return data;
  } catch (error) {
    console.error("Error fetching todos:", error);
    throw error;
  }
};

export const addToDo = async (text: string) => {
  console.log("Adding todo:", text);
  try {
    await axios.post(`${baseUrl}/save`, { text });
    // 新增成功后立即获取最新任务列表并返回
    return getAllToDo();
  } catch (err) {
    console.log(err);
    throw err;
  }
};

2. 修改组件内的addTodo方法，异步更新状态

将组件中的addTodo改为异步函数，等待新增接口完成后，将最新任务列表同步到state.toDo：

const addTodo = async () => {
  const trimmedText = state.newTodoText.trim();
  if (trimmedText) {
    try {
      const newTodos = await addToDo(trimmedText);
      // 根据后端返回数据类型调整解析逻辑，如果后端直接返回数组则无需JSON.parse
      state.toDo = Array.isArray(newTodos) ? newTodos : JSON.parse(newTodos);
      state.newTodoText = "";
    } catch (error) {
      console.error("添加任务失败:", error);
    }
  }
};

3. 优化onMounted中的数据解析逻辑（可选）

避免重复解析或解析错误，判断返回数据是否为数组后再赋值：

onMounted(async () => {
  try {
    const todos = await getAllToDo();
    state.toDo = Array.isArray(todos) ? todos : JSON.parse(todos);
  } catch (error) {
    console.error("获取任务列表失败:", error);
  }
});

额外优化建议 #

• 避免使用index作为v-for的key，建议后端返回每个任务的唯一id，用item.id作为key，提升列表渲染性能和稳定性。
• 可以考虑在addToDo接口返回中直接包含新增的任务数据，无需重新调用getAllToDo，减少一次接口请求。

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