检测 mobx observable 何时发生变化答案

【问题标题】：Detect when mobx observable has changed检测 mobx observable 何时发生变化
【发布时间】：2022-05-03 01:26:14
【问题描述】：

是否可以检测到 observable 何时发生任何变化？

例如，假设你有这个：

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

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

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

我目前的解决方案是添加另一个可观察的myObjectChanged，它返回真/假，并且无论组件更改 myObject 中的数据，我还添加了一行将 myObjectChanged 更改为 true。如果单击保存按钮，它会保存该 observable 并将其更改回 false。

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

【问题讨论】：

我觉得您可以在此处使用computed、observe、spy 或autorun 中的任何一个，具体取决于您在观察中所需的粒度级别。这里有一个简单的例子，用computed github.com/mobxjs/mobx/issues/164 对表单进行脏检查

标签： reactjs react-jsx mobx mobx-react

【解决方案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;
});

【讨论】：

效果很好，谢谢！一件小事是应该让 firstAutorun ，因为 const 不允许它更改为 false。
糟糕，现在已修复！

【解决方案2】：

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

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

【讨论】：

【解决方案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
);

【讨论】：