The vuex state modifies one state value, and the other state value also changes?

go straight to the code:

// 
const tree = {
  state: {
    allNode: [],
    treeNode: null
  },
  mutations: {
    SET_ALL_NODE: (state, keys) => {
      state.allNode = [...keys];
    },
    SET_TREE_NODE: (state, nodes) => {
      state.treeNode = [...nodes];
    }
  },
  actions: {
    async GetAllNode({commit}){      
      commit("SET_ALL_NODE", keys);
      return keys;
    },
    async GetTreeNode({commit}, nodes) {
      commit("SET_TREE_NODE", nodes);
      return nodes;
    }
  }
}
export default tree;

// 
async getallTree() {
  let allData = store.state.tree.allNode;
  for (let item of allData) {
    item["disabled"] = true;
  }
  this.menuData = [...store.state.tree.treeNode];
}

what I modify directly is allData why the allNode and treeNode corresponding states are filled with the disabled attribute.

Aug.11,2021

doesn't see the complete code, but chances are that you directly referenced the array of alldata into treeNode and allNode ?

but I pay attention to your two lines of code:

SET_ALL_NODE: (state, keys) => {
  state.allNode = [...keys]; // 
},
SET_TREE_NODE: (state, nodes) => {
  state.treeNode = [...nodes];
}

means that you directly extract the data of alldata and then add it directly to the treeNode and allnode data through the shallow copy of the array ?

for example, take a look at the following example and change the value of the latter one. Because the reference has not changed, the previous array value has changed due to the later change:

Menu