检测可观察的Mobx何时更改

Question

是否可以检测到可观察到的物体以任何方式发生变化？

例如，假设您有以下内容：

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

然后，通过一些用户输入，值会更改。我如何轻松检测到这一点？

我想添加一个全局的“保存”按钮，但只有在自初始加载以来该可观察项已更改的情况下，才能使其单击。

我当前的解决方案是添加另一个myObjectChanged返回true / false的observable ，并且无论组件在myObject中更改数据的位置如何，我还添加一行将myObjectChanged更改为true的行。而且，如果单击保存按钮，它将保存并更改为可观察到的false。

这导致大量额外的代码行散布在各处。有更好/更清洁的方法吗？

Answer 1

您可以使用以下方法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;
});