Как я могу сделать функциональность редактирования с магазином 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()