mobx：如何观察嵌套对象的变化？

Question

我有两个模型：包含消息文本（可观察）的 MessageModel 和包含这些 MessageModel 对象列表（也可观察）的 MessageListModel。

我在消息列表的每次更改上注册了一个 mobx.autorun()。

但是，autorun 触发列表中的 adding/removing 条消息，但不会触发更改现有消息的文本。

示例：

我的MessageListModel:


import { observable, decorate } from "mobx";
import MessageModel from "./MessageModel";
import * as mobx from "mobx";

class MessageListModel {

  messages = [];

  constructor() {
        mobx.autorun(() => {
          console.log('Autorun triggered!');
          console.log(this.messages.length);
        });
    }

  addMessage(text) {
    this.messages.push(new MessageModel({ messageList: this, text: text }));
  }

  getMessageText(index) {
    return this.messages[index].text;
  }

  setMessageText(index, messageText) {
    this.messages[index].text = messageText;
  }
}

decorate(MessageListModel, {
  messages: observable,  // don't wanna use decorator syntax
})


export default MessageListModel;

我的MessageModel:


import { observable, computed, action, decorate } from "mobx";
import {observer} from "mobx-react";

class MessageModel {

  constructor({messageList, text}) {
    this.text = text;
    this.messageList = messageList;
  }

  text = undefined;
}

decorate(MessageModel, {
  text: observable,
})


export default MessageModel;

正在尝试运行这个：

const messageList = new MessageListModel();

messageList.addMessage('msg1');   // triggers autorun
messageList.addMessage('msg2');   // triggers autorun

messageList.setMessageText(1, 'other text');  // does not trigger autorun
messageList.setMessageText(0, 'other text');  // does not trigger autorun either

如何让它观察我消息的变化，而不是它们的数量？

Answer 1

在您的 autorun 方法中，您只是侦听消息数组 length 的变化，因此唯一被跟踪的是autorun函数是数组的length属性。

尝试将 autorun 更改为此以查看区别：

mobx.autorun(() => {
  console.log('Autorun triggered!');
  console.log(this.messages.length);

  this.messages.map((model)=>{
    console.log(model.text)
  })      
});

在上面的示例中，我们正在访问 model 上的 text 属性，因此无论何时您在任何模型上更改 text，autorun 都会执行。

因此，autorun 仅当明确跟踪（在函数内部访问）的属性发生更改时才会运行。

mobx：如何观察嵌套对象的变化？

mobx: how to observe changes in nested objects?

mobx