如何使用 Vuex 商店制作编辑功能？

Question

我应该怎么做才能在我的 Vue + Vuex 商店上拥有编辑功能？这是我的代码：

<ul>
  <li v-for="todo in todos" :key="todo.task">
    <span v-bind:class="{todo: todo.completed}">{{todo.id}} - {{todo.task}}</span>
    <button @click="editTodo(todo)">Edit</button>
    <button @click="toggleTodo(todo)">Complete</button>
    <button @click="removeTodo(todo)">Delete</button>
  </li>
</ul>

{
  mutations: {
    editTodo(state, todo) {
      state.todos = state.todos.map(originalTodo =>
        originalTodo.id === todo.id ? todo.task : originalTodo
      );
    }
  },

  actions: {
    async editTodo({ commit }, task) {
      const res = await axios.patch(`http://localhost:4444/todos/${todo.id}`, {
        task
      });

      commit("editTodo", res.data);
    }
  }
}

Answer 1

您可以使用state.todos.splice(state.todos.findIndex(original => todo.id === original.id), 1, todo) 代替.map()