MobX 对象数组上的深度自动运行

我看过这个问题 https://github.com/mobxjs/mobx/issues/90在 Github 上和这个问题 https://stackoverflow.com/questions/40568576/make-single-mobx-autorun-or-reaction-for-observable-property-of-all-objects-in-a在 stackoverflow 上，但我仍然不确定如何触发我拥有的数据结构的自动运行。我从存储中获取数据作为 json 对象。

// Object keys do not change
const sampleData =
[
    {
        "title": "some-title",
        "isActive": true,
        "isCaseSensitive": false,
        "hidePref": "overlay",
        "tags": ["tag1", "tag2"]
    },
    {
        "title": "all-posts",
        "isActive": false,
        "isCaseSensitive": true,
        "hidePref": "overlay",
        "tags": ["a", "b", "c"]
    }
];

class Store {
    @observable data;

    constructor() {
        this.data = getDataFromStorage();
        if (this.data === null) {
            this.data = sampleData;
        }
    }
}

const MainStore = new Store();

autorun(() => {
    console.log("autorun");
    sendPayloadToAnotherScript(MainStore.data);
})

每次将新对象添加到数据数组或更改对象中的任何字段值时，如何让自动运行运行？

实现此功能的最简单方法是使用JSON.stringify()递归地观察所有属性：

autorun(() => {
  console.log("autorun");
  // This will access all properties recursively.
  const json = JSON.stringify(MainStore.data);
  sendPayloadToAnotherScript(MainStore.data);
});