Question

我是mobx的新手，我想对Mobx进行快速测试，以了解如何将其适应我的项目。

当我运行这段代码

class Entity{
   @observable version = 1;
}

let testEntity = new Entity();

let disposer = autorun(() => console.log(`Entity version : ${testEntity.version}`));

testEntity.version = 2;
testEntity.version = 3;

disposer();

我希望看到此输出

Entity version : 1
Entity version : 2
Entity version : 3

但是，相反，我只能看到Entity version : 1

但是，如果我使用可观察的普通对象而不是具有可观察属性的类，则会得到所需的输出。示例：

let testEntity = observable({ version: 1 });

let disposer = autorun(() => console.log(`Entity version : ${testEntity.version}`));

testEntity.version = 2;
testEntity.version = 3;

disposer();
// this works and I see autorun firing three times instead of only the first.

所以我认为我应该使该类实例可观察。

我使用了let testEntity = observable(new Entity());，但这引发了一些.box功能的错误。

这次我再次尝试let testEntity =observable.box(new Entity());，但没有出错。

但是这次我得到了这个结果Entity version : undefined

这是怎么回事，如何实现可观察的类实例？

也许我对问题的处理方法错误。我想将域对象作为类实例添加一些业务逻辑，并在其中进行数据处理。

我已经阅读了有关mobx跟踪的内容和不跟踪的内容的文章，但似乎我仍然想念一些东西。

Answer 1

我没用过autorun，但是我认为问题是您在课堂外打电话给autorun。尝试将代码行移至您的班级内：

class Entity{
   @observable version = 1;

   let disposer = autorun(() => console.log(`Entity version : ${version}`));
}

let testEntity = new Entity();



testEntity.version = 2;
testEntity.version = 3;

testEntity.disposer();

Answer 2

谢谢您的示例，但是，我测试了您的代码，并且它工作得很好，我们甚至不需要将autorun的收益保存在处置器中。

下面是测试代码片段，该代码片段运行良好，即可以打印3次控制台，并更新值。

import { observable, autorun } from 'mobx';
class Entity {
  @observable version = 1;
}

let testEntity = new Entity();

autorun(() => console.log(`Entity version : ${testEntity.version}`));

testEntity.version = 2;
testEntity.version = 3;
// prints
Entity version : 1
Entity version : 2
Entity version : 3

----------------------------------------

/* Taking autorun inside class is fine either */
class Entity {
  @observable version = 1;
  disposer = autorun(() => console.log(`Entity version : ${this.version}`));
}

为什么未跟踪js类的mobx可观察属性，却未跟踪mobx可观察对象的属性？

2 个答案: