Vue使用computed实现搜索时意外修改Vuex状态问题求解

JavaScript中对象、数组属于引用类型，你在代码中直接获取了Vuex状态中kommunhanteringItems数组的原始对象引用，执行x.items = filter操作时直接修改了原对象的属性，因此会污染Vuex的原始状态。

过滤时仅拷贝需要修改的分组对象，不操作原状态里的引用数据即可，优化后代码如下：

SearchInTables() {
  const k = this.$store.state.todos.kommunhanteringItems
  if (this.SearchQuery.trim() === '') {
    // 无搜索词时返回浅拷贝数组，避免后续操作意外污染原状态
    return [...k]
  }
  // 提前统一转大写，避免循环内重复执行，提升性能
  const searchQueryUpper = this.SearchQuery.toUpperCase()
  return k.map(group => {
    // 拷贝外层分组对象，所有修改都在新对象上执行
    const filteredGroup = {...group}
    filteredGroup.items = group.items.filter(item => {
      return item.customer.toUpperCase().includes(searchQueryUpper)
    })
    return filteredGroup
  })
}

• 如果分组对象下还有更深层级的复杂属性需要修改，可根据实际场景做对应层级的深拷贝，当前场景下浅拷贝外层分组对象即可满足需求
• Vuex状态仅允许通过mutation修改，所有直接修改state的操作都不符合规范，会导致状态溯源、调试异常

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