调用MUTATE_DATA函数后item的嵌套instance_setting属性丢失问题

问题原因分析 #

JavaScript 中对象是引用类型，你存入state.menuItems的item和函数内定义的item指向同一块内存地址，任意位置修改该对象，所有引用处都会同步变更。你贴出的state.newItems.push({ id: item.id })代码本身仅读取了item的id属性，不会修改原对象，属性丢失是这行代码触发的后续副作用逻辑导致的，常见原因如下：

• 存在监听state.newItems数组变化的回调逻辑
  大概率你在代码中通过watch、effect或者自定义事件订阅了state.newItems的变更，当你往newItems新增元素后，回调逻辑会根据id匹配到state.menuItems中对应的item对象，对其做属性裁剪/重置操作，删除了未在预设字段内的instance_setting属性。
• 控制台打印的快照误导
  Chrome等浏览器的console.log打印对象时，保存的是对象的引用，你点击展开对象时才会读取当前最新的属性值，可能你打印时instance_setting还存在，后续异步逻辑删除了该属性，导致你展开时看不到该字段。
• 状态管理库的特殊转换逻辑
  如果你使用的状态管理库（比如早期的Pinia/Vuex配置了严格的字段校验、或者状态持久化插件做了序列化过滤），会对存入state的非预设字段做自动剔除操作，当你把item存入state.menuItems时，instance_setting被自动删除。

排查方案 #

1. 仅注释state.newItems.push({ id: item.id })这行代码，其余逻辑保持不变，再次运行查看打印结果，如果instance_setting正常存在，即可确认是该行触发的后续副作用修改了原对象
2. 把打印语句修改为console.log(JSON.parse(JSON.stringify(item)))或者直接打印console.log(item.instance_setting)，验证属性是否真的在调用MUTATE_DATA后立即丢失，排除控制台快照的误导
3. 全局搜索所有监听state.newItems变化的相关逻辑，检查是否存在根据id修改对应item属性的操作
4. 检查状态管理相关的配置，确认是否开启了字段白名单校验、自动序列化过滤等会删除非预设属性的规则

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