V-model为何会更新未直接引用的Vuex store状态数据？

问题原因 #

该问题由JavaScript的对象引用赋值特性导致：

• 对象属于JS引用类型，你代码中this.currentObj = this.$store.state.docuMaster[this.$store.state.currentUID]的写法并没有创建独立的新对象，只是将store中对应对象的内存指针赋值给了本地变量currentObj，两者指向完全相同的数据实体
• 所以你通过v-model修改currentObj.poltxt属性时，本质就是直接修改store中存储的原对象属性，才会出现未提交mutation却改动store状态的现象

修复方案 #

你需要将store中的对象做拷贝后再赋值给本地变量，根据对象复杂度选择对应方案：

• 如果是无嵌套属性的简单对象，使用浅拷贝即可：

// 对象解构写法
this.currentObj = {...this.$store.state.docuMaster[this.$store.state.currentUID]}
// Object.assign写法
this.currentObj = Object.assign({}, this.$store.state.docuMaster[this.$store.state.currentUID])

• 如果是存在嵌套对象、数组的复杂对象，需要使用深拷贝：

// 无特殊类型值（函数、Symbol、BigInt等）的场景可以用JSON序列化方案
this.currentObj = JSON.parse(JSON.stringify(this.$store.state.docuMaster[this.$store.state.currentUID]))
// 引入了Lodash工具库的场景可以直接调用深拷贝方法
this.currentObj = _.cloneDeep(this.$store.state.docuMaster[this.$store.state.currentUID])

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