• 1. MobX 介绍
  • 1.1. MobX 要点
  • 1.2. 概念与原则
• 2. API概览
• 1. observable 相关
  • 3.1. observable
  • 3.2. @observable
  • 3.3. objects
  • 3.4. arrays
  • 3.5. maps
  • 3.6. boxed values
  • 3.7 decorators
• 1. 对 observables 作出响应
  • 4.1. (@)computed
  • 4.2. autorun
  • 4.3. when
  • 4.4. reaction
  • 4.5. (@)observer
  • 4.6. 理解 MobX 对何作出响应
• 1. 改变 observables
  • 5.1. action
  • 5.2. async actions & flows
  • 5.3. Object api
• 1. 工具函数
  • 6.1. toJS
  • 6.2. extendObservable
  • 6.3. createAtom
  • 6.4. intercept & observe
  • 6.5. mobxUtils.fromPromise
  • 6.6. mobxUtils.fromResource
  • 6.7. mobxUtils.toStream
  • 6.8. mobxUtils.fromStream
  • 6.9. mobxUtils.now
  • 6.10. mobxUtils.createTransformer
  • 6.11. mobxUtils.expr
  • 6.12. complete api overview
• 7. 博客、 视频及相关项目
• 1. 贴士与技巧
  • 8.1. 常见问题解答
  • 8.2. 常见陷阱与最佳实践
  • 8.3. 如何(不)使用装饰器
  • 8.4. 使用 trace 进行调试
  • 8.5. 定义数据存储
  • 8.6. 优化 React 组件
  • 8.7. 开发工具
  • 8.8. spy
• 9. 捐赠
• Published with GitBook

5.3. Object api

直接操控 Observable

现在有一个统一的工具 API 可以操控 observable 映射、对象和数组。这些 API 都是响应式的，这意味着如果使用 set 进行添加，使用 values 或 keys 进行迭代，即便是新属性的声明都可以被 MobX 检测到。

• values(thing) 将集合中的所有值作为数组返回
• keys(thing) 将集合中的所有键作为数组返回
• entries(thing) 返回集合中的所有项的键值对数组

使用 MobX 5 时, 实际上并不需要以下方法，但它们可以用来在 MobX 4 中来实现类似于 MobX 5 的行为:

• set(thing, key, value) 或 set(thing, { key: value }) 使用提供的键值对来更新给定的集合
• remove(thing, key) 从集合中移除指定的项。用于数组拼接
• has(thing, key) 如果集合中存在指定的 observable 属性就返回 true
• get(thing, key) 返回指定键下的子项

import { get, set, observable, values } from "mobx"
const twitterUrls = observable.object({
    "John": "twitter.com/johnny"
})
autorun(() => {
    console.log(get(twitterUrls, "Sara")) // get 可以追踪尚未存在的属性
})
autorun(() => {
    console.log("All urls: " + values(twitterUrls).join(", "))
})
set(twitterUrls, { "Sara" : "twitter.com/horsejs"})

results matching ""

No results matching ""