Mobx 状态管理

Mobx 介绍

• Mobx 是一个功能强大，上手非常容易的状态管理工具
• Mobx 背后的哲学很简单：任何源自应用状态的东西都应该自动地获得
• Mobx 利用 getter 和 setter 来收集组件的数据依赖关系，从而在数据发生变化时，精确的知道哪些组件需要重绘

Mobx 与 redux 的区别

• Mobx 写法上更偏向于面向对象
• 对数据直接进行修改操作，不需要始终返回一个新的数据
• 并非单一 store，可以有多个 store
• redux 默认以 JavaScript 原生对象形式存储数据，而 Mobx 使用可观察对象存储数据

Mobx 的优缺点

• 优点：学习成本小
• 缺点：
  • 过于自由：Mobx 提供的约定及模板代码很少，代码编写很自由，如果不做些约定，比较容易导致团队代码风格不统一
  • 相关中间件很少，逻辑层业务整合是个问题

Mobx 使用

• 主要提供了 observable 和 autorun 两个属性方法

• 安装 mobx

  $ npm install mobx -S
  

  // 引入 mobx 对应功能模块
  import { observable, autorun } from 'mobx'
  
  // 定义初始状态
  // 1. 定义简单数据类型使用 observable.box() 方法
  const valueObserver = observable.box(true)  // 转换成可观察对象形式
  
  // 2. 定义对象
  const objObserver = observable.map({key: 'abc'}) 
  // 设置： objObserver.set('key', 'newValue')，获取：objObserver.get('key')
  
  const objObserver = observable({key: 'abc'})
  // 设置：objObserver.key = 'newValue'，获取： objObserver.key
  
  // 3. 定义数组
  const arrObserver = observable([1, 2, 3])
  // 设置：arrObserver[2] = 'newValue'
  
  // 暴露状态
  export default { valueObserver, objObserver, arrObserver }
  
  // 监听状态（可以在任意文件中监听）
  autorun(() => { // 只有在初始化及改变对应的监听状态时触发这个回调函数
      // valueObserver.get() 获取监听的状态值
      console.log(valueObserver.get())
  })
  
  // 改变状态(可以在任意文件中修改状态)
  valueObserver.set(false)