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:

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1beace2-3126f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1beace2-3126f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?