MobX tutorial的一部分中,一个示例对名为report的属性使用getter语法。

class ObservableTodoStore {
@observable todos = [];
@observable pendingRequests = 0;

constructor() {
    mobx.autorun(() => console.log(this.report));
}

@computed
get completedTodosCount() {
    return this.todos.filter(
        todo => todo.completed === true
    ).length;
}

@computed
get report() {
    if (this.todos.length === 0)
        return "<none>";
    return `Next todo: "${this.todos[0].task}". ` +
        `Progress: ${this.completedTodosCount}/${this.todos.length}`;
}

addTodo(task) {
    this.todos.push({
        task: task,
        completed: false,
        assignee: null
    });
}
}

const observableTodoStore = new ObservableTodoStore();

observableTodoStore.addTodo("read MobX tutorial");
observableTodoStore.addTodo("try MobX");
observableTodoStore.todos[0].completed = true;
observableTodoStore.todos[1].task = "try MobX in own project";
observableTodoStore.todos[0].task = "grok MobX tutorial";

// Next todo: "read MobX tutorial". Progress: 0/1
// Next todo: "read MobX tutorial". Progress: 0/2
// Next todo: "read MobX tutorial". Progress: 1/2
// Next todo: "grok MobX tutorial". Progress: 1/2


当我从报告属性中删除get关键字时,

@computed
report() {
// ...


然后更改对该报表的调用以反映它不再是一个吸气剂,

constructor() {
    mobx.autorun(() => console.log(this.report()));
}


然后我仍然获得控制台输出。但是,这是非常不同的。

// Next todo: "grok MobX tutorial". Progress: 1/7
// Next todo: "grok MobX tutorial". Progress: 1/8


为什么结果如此不同?我认为使用吸气剂的决定更多是一种样式选择。

最佳答案

您需要将get@computed装饰器结合使用。

computed decotator的文档指出:


  如果启用了装饰器,则可以在@computed装饰器上使用
  类属性的任何获取器,以声明方式创建计算
  属性。

关于javascript - 为什么在此MobX示例中需要“获取”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48143703/

10-10 12:46