reactjs - 检测 mobx observable 何时发生变化

Question

是否可以检测可观察的变化何时发生？

例如，假设您有这个:

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

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

我想添加一个全局“保存”按钮，但仅当该可观察量自初始加载以来发生更改时才可单击。

我当前的解决方案是添加另一个返回 true/false 的可观察 myObjectChanged，并且无论组件在何处更改 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;
});