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引入之后，最好不要直接用这个变量进行遍历