vuex 状态修改一个状态值,另一个状态值也改变了?

Mondo
  • 945

直接上代码:

// 树状态
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];
}

我直接修改的是allData为什么状态中的allNodetreeNode相应的状态都填上了disabled属性。

回复
阅读 1.7k
1 个回答
✓ 已被采纳

没有看到完整的代码,但是大概率怀疑你是不是直接把alldata的数组直接引用到了treeNodeallNode中了?

但是我注意你这两行代码:

SET_ALL_NODE: (state, keys) => {
  state.allNode = [...keys]; // 你好像是通过直接赋值的方式,这是浅拷贝,数组指针的引用没有改变,如果你浅拷贝的数组数据改变了,数据源也会改变
},
SET_TREE_NODE: (state, nodes) => {
  state.treeNode = [...nodes];
}

意思就是你是不是直接把alldata的数据提取出来,然后通过数组浅拷贝的方式直接加到treeNodeallnode数据中去了?

比如看看下面这个例子,改了后面的那个的值,由于引用没有变化,所以之前的数组值由于后面的改变而改变了:

数组浅拷贝测试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏