Vuex数组添加子项异常：新项同时成为根节点子元素问题排查

核心问题1：重复引用与ID错误 #

你的createNewNodeList函数存在严重问题：newNode对象在map循环外部声明，导致每次迭代都是修改同一个对象的属性并返回其引用。这会导致：

• 生成的newNodeList中所有元素都是同一个对象，所以日志里两个新节点的ID都是3（最后一次递增后的值）
• 后续任何对这些节点的修改都会同步影响所有“副本”

修复代码：
将newNode的声明移到map循环内部，确保每次迭代创建新对象：

const createNewNodeList = (nodeList, arrayLength) => {
  return nodeList.map(node => {
    const newNode = {};
    newNode.parentId = node.parentId || null;
    newNode.name = node.name;
    newNode.monetaryValue = node.monetaryValue || 0;
    newNode.id = ++arrayLength;
    newNode.children = [];
    return newNode;
  });
}

核心问题2：原state对象被意外修改 #

从日志看，根节点的children被莫名添加了新节点，这是因为：

• mergedArrays中的根节点是state.flattenedTreeData中节点的直接引用
• 你的unflattenTree函数可能存在副作用，直接修改了传入数组中的节点对象（给根节点的children添加元素），导致原state.flattenedTreeData里的根节点也被修改

修复代码：
创建mergedArrays时对原节点进行深拷贝，切断引用关系：

// 用JSON序列化/反序列化实现深拷贝（适合纯数据对象）
const mergedArrays = [
  ...state.flattenedTreeData.map(node => JSON.parse(JSON.stringify(node))),
  ...newNodeList
];

额外补充 #

你的mutation中没有更新state.flattenedTreeData，如果需要维护扁平数据的最新状态，应该在最后添加：

state.flattenedTreeData = mergedArrays;

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