在forEach中更新JavaScript对象时触发Vuex状态修改报错如何解决？

"[vuex] do not mutate vuex store state outside mutation handlers." 报错由Vuex的状态变更校验规则触发：所有存储在Vuex store中的状态，必须在mutation回调函数内执行修改操作。你当前直接遍历修改store中objectX.test数组的元素属性，属于在mutation外直接变更store state，因此触发了报错。

根据你的使用场景二选一即可：

场景1：需要同步更新Vuex store中的状态（官方推荐标准用法） #

• 首先在Vuex store的mutations配置中新增对应的更新逻辑：

mutations: {
  // 第一个参数固定为store的state，第二个参数为传入的自定义参数newId
  UPDATE_TEST_ALL_ID(state, newId) {
    // 采用map生成全新数组、结构生成全新对象的写法，符合不可变原则，也能保证Vue响应式更新生效
    state.objectX.test = state.objectX.test.map(item => ({
      ...item,
      id: newId
    }))
  }
}

• 在需要触发更新的位置（组件/Store的action中）调用commit触发该mutation即可：

// 组件内调用示例
this.$store.commit('UPDATE_TEST_ALL_ID', 要替换的新id值)

// Store的action内调用示例
commit('UPDATE_TEST_ALL_ID', 要替换的新id值)

场景2：仅需要拿到修改后的数据，不需要同步更新Vuex store状态 #

先深拷贝store中的objectX对象，脱离原store的引用后再做修改，不会触发校验报错：

// 深拷贝得到完全独立的新对象
const clonedObjectX = JSON.parse(JSON.stringify(objectX))
// 修改新对象不会影响store状态
clonedObjectX.test.forEach(obj => {
  obj.id = newId
})
// 后续直接使用clonedObjectX即可

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