vue.js中深拷贝的应用

一:问题场景

重现demo链接戳这里   ¥  http://download.lllomh.com/cliect/#/product/J417954460915655

重现demo链接戳这里   c  https://download.csdn.net/download/lllomh/11979039

1,当vuex 获取的值 在页面中 复制给 变量   在页面中又有修改该变量的时候,如下:

    computed: {
        data_us() {
            return this.$store.state.data_us
        },
    },
    watch:{
        data_us(val){
            if (val) {
                this.list = val
                this.img_url=val.icon_img+'?t='+this.times_m();
            }
        }
    },

这里 vuex 获取的值 赋值给了 list 对象.这个时候如果该组件在页面展示 list的属性 肯定不会有问题.

但是有操作修改list 的属性的时候就会报错了.报什么错呢?如下:

2,那为何要使用watch 监听呢?

如果去掉 watch 直接:

    computed: {
        data_us() {
            return this.$store.state.data_us
        },
    },

在这里这么使用的时候:

<div class="form-group">
  <label class="col-sm-5 control-label">邮件地址</label>
    <div class="col-sm-4">
      <input type="tel" name="email_address" id="email_address" class="form-control" v-model="data_us.email_address">                           
     </div>                              
 </div>

如上这样读取 email 值肯定可以.但是在页面上修改 input 值的时候就又会出现上面1 的错!.computed某一个值发生了变化则我们监控的这个值也就会发生变化.vuex 的值在 this.$store.state.data_us 情况下是不可以修改的,故会包如上1的错误.

二:解决方案

1,直接深拷贝搞定:

深拷贝,复制出一个不影响的对象再赋值给list, 即在组件上修改list 的属性值 不会触动上1的错误!

如有错误,欢迎指正