javascript - mobxextendObservable不能按预期工作

我正在尝试使用extendObservable在可观察状态下添加更多属性，但是它不起作用。下面是我的代码

var store = mobx.observable({
  property: {}
});


mobx.autorun(function () {
  console.log("render:"+store.property.a);
});

store.property = {a:1};
extendObservable(store.property, {a:2});
store.property.a=3;

输出为：

render:undefined
render:1

我用property对象初始化了一家商店。我想将a添加为property下的可观察状态，但是在使用autorun方法后没有执行extendObservable。我期望值3被打印，但没有打印。我的代码有什么问题？是使用extendObservable方法的正确方法吗？

最佳答案

您可以在文档的Common pitfalls & best practices部分中了解为什么此方法不起作用：


  MobX可观察对象不会检测到属性或对其做出反应
  以前没有宣布可观察到的。因此MobX可观察对象
  充当具有预定义键的记录。您可以使用
  extendObservable(target, props)引入新的可观察的
  对象的属性。但是对象迭代器如for .. in或
  Object.keys()不会对此自动做出反应。如果您需要
  动态键对象，例如按id存储用户，创建
  可观察的_map_s使用
  observable.map。


因此，可以在可观察对象上添加新的密钥，而不是在可观察对象上使用extendObservable。

例

var store = mobx.observable({
  property: mobx.observable.map({})
});

mobx.autorun(function () {
  console.log('render:' + store.property.get('a'));
});

store.property.set('a', 2);

setTimeout(function () {
  store.property.set('a', 3);
}, 2000);