如何通过Vuex实现待办任务完成状态的切换？

一、核心404错误原因 #

你的子组件调用toggleTask时没有传递任务ID，导致传给action的id是undefined，最终请求URL变成https://dummyjson.com/todos/undefined，触发404。

修复子组件的点击事件： #

把按钮的点击事件改成传递当前任务的ID：

<!-- 子组件Task.vue -->
<button @click="toggleTask(task.id)">
  {{ task.completed ? 'Undone' : 'Done' }}
</button>

二、API请求的其他问题 #

DummyJSON的PUT更新todo接口要求传递修改的字段，你当前的请求没有body，后端无法识别要更新的内容；同时action里存在变量未定义的问题：

修复action中的toggleTask方法： #

// store/index.js 中的actions
async toggleTask(context, id) {
  // 先找到当前任务，获取要切换的状态
  const targetTask = context.state.tasks.find(task => task.id === id);
  if (!targetTask) return false;

  const newCompletedState = !targetTask.completed;
  
  const res = await fetch(`https://dummyjson.com/todos/${id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
    },
    // 必须传递要更新的字段给后端
    body: JSON.stringify({ completed: newCompletedState })
  });

  if (res.ok) {
    // 请求成功后，通过mutation修改state（Vuex规范要求必须通过mutation改状态）
    context.commit('toggleTask', id);
  }
  return res.ok;
},

三、修复mutation中的错误 #

你的toggleTask mutation里的!completed是未定义变量，应该先找到对应任务再切换状态：

// store/index.js 中的mutations
toggleTask(state, id) {
  const task = state.tasks.find(task => task.id === id);
  if (task) {
    task.completed = !task.completed;
  }
},

四、关于Vuex Action vs Mutation的疑问 #

不需要改用mutation直接处理点击事件，Vuex的设计规范是：

• Mutation：仅用于同步修改state，不能包含异步操作（比如API请求）
• Action：用于处理异步逻辑（比如调用后端API），异步操作完成后再commit mutation修改state

你的场景完全符合这个规范：点击按钮触发action，action调用后端API更新数据，请求成功后通过mutation修改本地state，这是正确的流程。

额外修复：父组件的getters问题 #

你的代码里getters是空的，但父组件computed里调用了this.$store.getters.getTasks(this.search)，需要补充getter逻辑（如果需要搜索功能）：

// store/index.js 中的getters
getters: {
  getTasks: (state) => (searchQuery) => {
    if (!searchQuery) return state.tasks;
    return state.tasks.filter(task => 
      task.todo.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }
},

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