为什么 es6 装饰器在 mobx 中不能正常工作？

Question

mobx@3.1.9 使用es6装饰器，@log('some_log'), this -> context is Store but don't have model.

装饰器不太好用

// mobx@3.1.9
const log = type => (target, name, descriptor) => {
  console.log(target);
  const method = descriptor.value;
  descriptor.value = (...args) => {
    console.log(type);
    let ret;
    ret = method.apply(target, args);
  };
};

class Store {
  @observable age = 20;
  model = observable.map({
    name: 'Alex',
  });

  @action
  @log('start_log')
  setData() {
    const res = { name: 'Bob' }
    this.age = 30;
    this.model.merge(res)
  }
}



error log

{constructor: ƒ, setData: ƒ, __mobxLazyInitializers: Array(1)}
age: (...)
$mobx: e {target: {…}, name: "ObservableObject@4", values: {…}, changeListeners: null, interceptors: null}
constructor: ƒ e()
setData: ƒ ()
__mobxDidRunLazyInitializers: true
__mobxLazyInitializers: [ƒ]
get age: ƒ ()
set age: ƒ (t)
__proto__: Object
}

TypeError: 无法读取未定义的属性 'merge'

目标只有年龄，没有模特。为什么？

Answer 1

问题出在您的记录器上。 target 是 Store.prototype 而不是 Store 的当前实例。而这个原型没有属性model.

所以Store.prototype.model.merge(res)会失败，因为没有Store.prototype.model。

const log = type => (target, name, descriptor) => {
  console.log(target);
  const method = descriptor.value;
  descriptor.value = function(...args) {
    console.log(type);
    console.log(this === target, this, target);
    const ret = method.apply(this, args);
  };
};

为什么 es6 装饰器在 mobx 中不能正常工作？

why es6 decorator in mobx can't work well?

javascript

reactjs

mobx