如何将新任务推送到数组？

Question

我希望在现有任务列表的顶部显示一个新任务。但是在单击“添加”按钮后，我收到错误无法读取未定义的属性（读取“id”），即使我在 newTask 对象中填充了一个新的 ganarated id。

// Child component

<template>
  <div class="create-new">
    <input
      type="text"
      v-model="title"
      @keypress.enter="addTask"
      placeholder="add task"
    />
    <button @click="addTask">Add</button>
  </div>
</template>
    
methods: {
    addTask() {
      let newTask = {
        id: Math.floor(Math.random() * 25 + 100),
        title: this.title,
        completed: false,
      };
      if (newTask) {
        console.log(newTask);
        this.$store.dispatch('addTask', newTask);

        // clear input
        this.title = '';
      }
    },


// Store

export const state = () => ({
  tasks: [],
});

const action: {
  async addTask(context, data) {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'appication/json;charset=utf-8',
      },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      let result = await res.json();
      context.commit('newTask');
    }
    return res.ok;
  },
}
  
  const mutations: {
    newTask(state, newTask) {
    state.tasks.push(newTask);
  },
  }

https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-bkwixg?file=store%2Findex.js,components%2FTask.vue,pages%2Findex.vue,components%2FNavbar.vue

Answer 1

您必须检查是否有从您的 post API 返回的任何数据（通常应该返回新创建的任务）。然后你必须将这个响应存储在变量中并将这个变量传递给突变，它将数据存储在状态中。之后你应该使用 getters 来获取状态。

在行动中：

async addTask(context, data) {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'appication/json;charset=utf-8',
      },
      body: JSON.stringify(data),
    });
    if (res && res.data && res.ok) {
      let result = await res.json();

      let responseData = res.data; // PLEASE CHECK RETURN DATA IN CONSOLE BEFORE
    
      
       context.commit('newTask', responseData);
    }
    return res.ok;
  },

为getter编写代码：

getters: {
    getTasks (state) {
      return state.tasks;
    }
  }
}

然后在计算属性中调用这个 getter。 参考见https://vuex.vuejs.org/guide/getters.html