javascript - 在 MobX 对象数组上深度自动运行

Question

我在 Github 上查看了这个问题，在 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);
})

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

Answer 1

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

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

Answer 2

Mobx-State-Tree getSnapshot 也可以。即使我现在找不到它：我读到 getSnapshot 非常快。

import { getSnapshot } from 'mobx-state-tree'
autorun(() => {
  console.log("autorun");
  // This will access all properties recursively.
  getSnapshot(MainStore.data);
  sendPayloadToAnotherScript(MainStore.data);
});