vuex的坑

引言

呜呜呜坑死我了

Object.assign

Object.assign reads the value of the property from the source object, it doesn’t copy getters/setters
来自stackOverflow
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。

var a={
    sub:{}
  };
  var b={
    sub:3
  };
  var initSub={};
  Object.defineProperty(a,'sub',{
    get(){
      console.log("触发了a的getter");
      return initSub;
    },
    set(newValue){
      console.log('触发了a的settter');
      initSub=newValue;
    }
  })
  Object.defineProperty(b,'sub',{
    get(){
      console.log("触发了b的getter");
      return initSub;
    },
    set(newValue){
      console.log('触发了b的settter');
      initSub=newValue;
    }
  })
  Object.assign(a,b);//触发了b的getter   触发了a的settter

遵循vue的响应式

Vuex中的store是响应式的,因此当要在对象上添加新属性时,应该使用Vue.set()方法来监听,否则state的状态无法实现自动更新。

Vue.set(obj, 'newProp', 123)  

为了避免这样的情况出现,最好在store中提前初始化好所有需要使用的属性。
注:如果我们要使用Object.assign的话,最好是已有的属性之间变化,才能被watch检测出来!

尽量避免直接在state上面进行操作

不要再上面进行遍历操作

compute引入之后,最好不要直接用这个变量进行遍历

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值