Vuex Mutation无法更新状态？为何无法从对象数组中移除指定元素？

咱们直接从你写的代码里找问题，这两个关键错误是导致移除元素失败的核心原因：

1. Filter 判断条件写反了 #

filter 方法的作用是保留符合判断条件的元素，你现在写的 return item.id === id，会把和传入id匹配的元素留下来，完全和“移除”的需求相反。要删掉指定id的元素，应该保留id不匹配的元素：

state.blockList = state.blockList.filter(item => item.id !== id);

2. 多余的 shift() 调用 #

你在filter后面加了.shift()，这会把filter返回的数组（本来是过滤后的正确数组）直接变成数组的第一个元素（数组非空时）或者undefined（数组为空时）。这直接导致state.blockList不再是数组类型！后续哪怕你赋值state.blockList = []，也可能因为之前的类型变更，导致响应式更新失效，或者组件逻辑因为预期是数组但实际不是而报错。

关于赋值空数组不生效的额外排查点 #

如果修正上面两个问题后，赋值空数组还是没效果，可以检查这几点：

• 确认state.blockList的结构：它是不是直接挂在根state下？如果是嵌套在子模块里，要确保dispatch时指定了模块命名空间。
• 组件里的取值逻辑：有没有用局部变量缓存了旧的数组，没有实时监听state的变化？比如是不是在created里存了一份this.blockList = this.$store.state.blockList，后续state更新后局部变量没同步？
• 确认Mutation是同步执行的：Vuex要求Mutation必须是同步操作，你的代码满足这点，没问题。

修正后的完整Mutation代码 #

REMOVE_BLOCK_FROM_LIST(state, id) {
  // 过滤掉目标id的元素，保留其余元素
  state.blockList = state.blockList.filter(item => item.id !== id);
}

如果只是想清空数组，直接赋值即可（确保此时state.blockList是数组类型）：

state.blockList = [];

内容的提问来源于stack exchange，提问作者Milos N.