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的错误!

如有错误,欢迎指正

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值