V-model 正在更新未引用的状态数据

Question

我正在尝试将 vuex 存储中的对象复制到本地组件对象，以便我可以在本地更改它而不修改存储状态对象。但是，当我将本地对象与 textarea v-model 关联时，它会更改存储状态数据，即使它没有被直接引用。我不确定这是怎么发生的，甚至是可能的。

<v-textarea v-model="currentObj.poltxt" solo light></v-textarea>

  watch: { //watch for current UID changes
    "$store.state.currentUID"(nv) {
      //Clearing the local temporary object
      this.currentObj = {};
      //Moving the store state data into the local object
      this.currentObj = this.$store.state.docuMaster[this.$store.state.currentUID];
    }
  }

watch 函数正在执行，当我控制台日志 this.$store.state.docuMaster[this.$store.state.currentUID] 我可以看到 v-model 甚至直接更新它尽管它引用了 currentObj。知道为什么会这样吗？文本框未在代码中的任何其他位置引用商店。

Answer 1

如果this.$store.state.docuMaster[this.$store.state.currentUID] 不是嵌套对象，请尝试使用

//Moving the store state data into the local object
      this.currentObj = Object.assign({}, this.$store.state.docuMaster[this.$store.state.currentUID]);

如果this.$store.state.docuMaster[this.$store.state.currentUID]) 是嵌套对象，那么你必须进行深度克隆

this.currentObj = JSON.parse(JSON.stringify(this.$store.state.docuMaster[this.$store.state.currentUID]));

注意： 我的意思是嵌套对象

docuMaster: {
 UID: {
  ...
   xyz: {}
 },
....
}

不是嵌套的 obj 意味着

docuMaster: {
 UID: {
  //no inner objects
 },
....
}