javascript - MobX 和深度可观察性
问题描述
我试图了解 MobX 中的深度可观察性。特别是,在下面的代码中,我希望每次运行时都调用自动运行setCommentCountForPost
,但目前不是。
我应该如何修复此代码?而且,当我阅读包含帖子的列表时,在 Post 的属性上可观察到足以激活自动运行?(就像我在自动运行中所做的那样)
我正在使用 MobX 5。
编辑:如果我在自动运行中使用以下调用,我发现代码工作正常:console.log(toJS(p.getPosts()));
. 这很有趣,但是为什么,如果我只想调用 getPosts(),我应该怎么做?
这是代码
import { useStrict, configure, autorun } from 'mobx';
import { toJS, observable, action, computed } from 'mobx';
configure({ enforceActions: true });
class Post {
@observable commentCount = 0;
setCommentCount(c) {
this.commentCount = c;
}
}
class PostList {
@observable _posts = {};
@action createPost(id) {
this._posts[id] = new Post();
}
@action setCommentCountForPost(id, c) {
this._posts[id].setCommentCount(c);
}
getPosts() {
return this._posts;
}
}
let p = new PostList();
p.createPost(1);
autorun(function test () {
console.log(p.getPosts());
});
p.setCommentCountForPost(1, 22);
解决方案
MobX 跟踪属性访问,而不是值
在您的示例中,自动运行功能仅跟踪 _posts,但不跟踪 _posts 的属性,因此如果您更改 _posts 值,则跟踪功能将起作用
console.log(toJS(p.getPosts()))
由于 toJS 函数为了将可观察值转换为正常值而工作,它访问 _posts 的属性。
如果你希望p.getPosts()
工作,你应该迭代访问_posts的属性。
推荐阅读
- json - 如何输出列表以 vuetify 数据表?
- java - 不要如何解决火花集群中GC中的问题,有人可以解释如何处理ParOldGen和PSYoungGen吗?
- windows - 如果 exe 和目标 dll 是 32 位,为什么我会在 LoadLibrary 中收到错误 193?
- android - Firebase:加载本地数据
- javascript - 将二维数组变成一棵树
- node.js - 没有firebase的Dialogflow nodejs实现
- deep-learning - 表示图像到类别映射所需的位
- npm - npm 重建错误:找不到 Python 可执行文件“python”
- db2 - 尝试将 HammerDB 连接到 Db2 for z/OS 时出现 SQL0199N 错误
- wpf - WPF - 在绑定触发期间 ImageSource 更改后图像失真