如何声明一个计算的 getter，它是一个带有 mobx 的可观察列表的集合

Question

我有一个 class 项目层次结构 => task_lists => 任务每个数组都是@observable。现在我想从项目中创建一个“@computed get allTasks”，它聚合了项目所有 task_lists 的所有任务。

class MsiTask {
    @observable name:string;
    constructor () {.... };
}
class MsiTaskList {
    @observable tasks:MsiTask[];
    constructor () {.... };
}

class MsiProject {
            id:string;
            @observable name:string;
            @observable taskLists:MsiTaskList[]=[];

            constructor (data) {
                    $log.debug ('Constructing a Project with', data, this);

                    this.id = data.id;
                    this.name = data.name;

                    ProjectCache[this.id] = this;

                    /** Can I do reassign taskLists or should I fill it? **/
                    this.taskLists = lodash.map (data.taskLists || [], (taskList) => {
                            return new MsiTaskList (taskList, this);
                    });


            }

            createTaskList (title:string) : MsiTaskList {
                    let taskList = new MsiTaskList ({ name: title, id: MsiUtils.uuid() }, this);
                    $log.debug ('add task list', title, taskList);
                    this.taskLists.push (taskList);
                    return taskList;
            }

 }

我目前是这样定义的：

在 class MsiProject ...

@computed get allTasks () : MsiTask[] {
   var arrayOfTasks = lodash.map(this.taskLists, 'tasks');
   var result = lodash.reduce(arrayOfTasks, (res, array) => {
         lodash.each (array, (it) => { res.push(it); });
         return res;
   }, []);
   return result; // tried also return observable.array (result);
 }

但是在我的自定义组件中使用时出现摘要循环错误：

我知道 allTasks returns 每次都是不同的数组，但我的想法是 mobx 会看到它的内容没有改变并且不会生成摘要循环。

我完全不明白如何使用 mobx 吗？

Answer 1

请记住，observable.array 实现了整个数组 API，但实际上并不是底层数组，因此最好使用内置实用函数而不是 lodash。不要覆盖对数组的引用，而是使用 replace。

示例 (JS Bin)

class MsiTaskList {
  @observable tasks = [];
  constructor(tasks) {
    this.tasks.replace(tasks);
  }
}

class MsiProject {
  id = '';
  @observable name = '';
  @observable taskLists = [];

  constructor(id, name, taskLists) {
    this.id = id;
    this.name = name;
    const lists = taskLists.map(list => new MsiTaskList(list));
    this.taskLists.replace(lists);
  }

  @computed get allTasks() {
    return this.taskLists.reduce((result, list) => {
      list.tasks.forEach(task => result.push(task));
      return result;
    }, []);
  }
}

如何声明一个计算的 getter，它是一个带有 mobx 的可观察列表的集合

How to your declare a computed getter which is an aggregate of observable list with mobx

angular

mobx