Vuex状态数组中切换项布尔值无效问题求助

你的问题核心在于同时用v-model直接修改Vuex状态，又通过@change触发mutation，两次修改操作互相抵消，导致toggle看起来没有生效。

具体原因 #

v-model是语法糖，会在复选框状态变化时直接修改todo.done的值；而你绑定的@change又会调用toggle mutation再次反转这个值——等于连续修改两次，最终回到初始状态，自然看不到变化。另外，直接用v-model绑定Vuex的state也违反了Vuex的核心规则：状态必须通过mutation修改，不能直接操作。

修复步骤 #

1. 调整模板，遵循单向数据流

移除v-model，改用:checked绑定状态，所有修改统一通过mutation完成：

<input
  type="checkbox"
  :checked="todo.done"
  @change="$store.commit('toggle', todo.id)"
/>

这样状态读取从store获取，修改完全交给mutation，避免了双向绑定和mutation的冲突。

2. 优化mutation的响应式处理（可选但推荐）

虽然当前修改state.todos[index].done能被Vue检测到，但替换整个对象的方式更稳妥，能避免极端情况下的响应式失效：

toggle(state: State, todoId: number) {
  const targetTodo = state.todos.find(todo => todo.id === todoId);
  if (targetTodo) {
    const index = state.todos.findIndex(t => t.id === todoId);
    // 解构原对象并修改done属性，替换原数组元素
    state.todos[index] = { ...targetTodo, done: !targetTodo.done };
  }
}

3. 简化模板写法（可选）

用mapState辅助函数替代模板里的$store.state.todos，让代码更简洁：

<script lang="ts">
import { defineComponent } from 'vue';
import { mapState } from 'vuex';

export default defineComponent({
  computed: {
    ...mapState(['todos'])
  }
});
</script>

之后模板里直接写todo in todos即可。

验证 #

修改后，点击复选框只会触发一次mutation，能正确反转done的值，同时完全遵循Vuex的状态管理规范。

内容的提问来源于stack exchange，提问作者Žan Fras