检测 mobx observable 何时发生变化

Question

是否可以检测可观察对象何时以任何方式发生变化？

例如，假设你有这个：

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]

稍后，通过一些用户输入，值会发生变化。我怎样才能轻松检测到这一点？

我想添加一个全局 "save" 按钮，但仅当该可观察对象自初始加载后发生更改时才可单击。

我目前的解决方案是添加另一个 observable myObjectChanged 即 returns true/false，只要组件更改 myObject 中的数据，我也添加一行更改 myObjectChanged为真。如果单击保存按钮，它会保存并将可观察到的值更改回 false。

这导致大量额外的代码行贯穿始终。有better/cleaner的方法吗？

Answer 1

创建一个将推送到 myObject 并设置 myObjectChanged 的操作

@action add(item) {
    this.myObject.push(item);
    this.myObjectChanged = true;
}

Answer 2

您可以使用 autorun 实现此目的：

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]
@observable state = { dirty: false }

let firstAutorun = true;
autorun(() => {
  // `JSON.stringify` will touch all properties of `myObject` so
  // they are automatically observed.
  const json = JSON.stringify(myObject);
  if (!firstAutorun) {
    state.dirty = true;
  }
  firstAutorun = false;
});

Answer 3

如 capvidel 所述，您可以使用 autorun 来跟踪变量是否发生变化，但为避免添加额外的变量 firstAutorun，您可以将 autorun 替换为 reaction:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]
@observable state = { dirty: false }
    
reaction(
   () => JSON.stringify(myObject),
   () => state.dirty = true
);

检测 mobx observable 何时发生变化

Detect when mobx observable has changed

reactjs

react-jsx

mobx

mobx-react