如何向父组件数组添加新Task？Vuex中newTask未定义错误排查

错误原因 #

你在Vuex的addTask action里犯了一个低级错误：data = { ...data, newTask }这行里的newTask变量根本没在当前作用域定义。子组件已经把构造好的task对象通过dispatch的第二个参数传给了action，也就是action里的data参数——它就是你要的newTask，没必要再额外引用一个不存在的newTask变量。

另外还有个小拼写错误：请求头里的'appication/json'应该是'application/json'，少了个l，这会导致请求格式不正确。

修复后的代码 #

修正后的Vuex Action

const actions = {
  async addTask(context, data) {
    // 不需要额外加newTask，直接使用传入的data即可
    const res = await fetch('https://jsonplaceholder.typicode.com/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8', // 修正拼写错误
      },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      await res.json();
      context.dispatch('getTasks');
    }
    return res.ok;
  },
}

补充说明

• 子组件里的代码是没问题的，你已经正确构造了newTask并传递给Vuex的action。
• 如果需要给传入的task对象添加额外字段，直接在data上扩展即可，比如：

  data = {
    ...data,
    createdAt: new Date().toISOString() // 示例：添加创建时间
  };
  

这样修改后，点击Add按钮就能正常提交任务并刷新列表了。

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