小程序 状态管理 mobx-miniprogram 和 miniprogram-compute

1、mobx-miniprogram

mobx-miniprogram 是针对微信小程序开发的一个简单、高效、轻量级状态管理库，它基于 Mobx 状态管理框架实现。可以实现全局共享的状态，并自动更新视图组件，从而提升小程序的开发效率

使用 mobx-miniprogram 需要安装两个包： mobx-miniprogram 和 mobx-miniprogram-bindings

官方文档：

1. mobx-miniprogram 官方文档

2. mobx-miniprogram-bindings 官方文档

npm install mobx-miniprogram mobx-miniprogram-bindings

1.2 创建 Store 对象

mobx-miniprogram 详细的使用步骤如下：

1. 在项目的根目录下创建 store 文件夹，然后在该文件夹下新建 index.js

2. 在 /store/index.js 导入 observable 、 action 方法

// observable：用于创建一个被监测的对象，对象的属性就是应用的状态(state)，这些状态会被转换成响应式数据。
// action：用于显式的声明创建更新 state 状态的方法
import { observable, action } from 'mobx-miniprogram'

// 使用 observable 创建一个被监测的对象
export const numStore = observable({

  // 创建应用状态
  test1: 1,
  test2: 2,
    
  // 使用 action 更新
  update: action(function () {
    this.test1+=1
    this.test2+=1
  }),

  // 计算属性，使用 get 修饰符，
  get sum() {
    return this.test1+ this.test2;
  }

})

1.3 在组件中使用数据

如果需要 Page 或者 Component 中对共享的数据进行读取、更新操作，需要使用 mobx-miniprogram-bindings

mobx-miniprogram-bindings 的作用就是将 Store 和 页面或组件进行绑定关联

如果需要在组件中使用状态，需要 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法

在使用时： 需要将 Component 方法替换成 ComponentWithStore 方法 ，原本组件配置项也需要写到该方法中

在替换以后，就会新增一个 storeBindings 配置项，配置项常用的属性有以下三个：

1. store : 指定要绑定的 Store 对象
2. fields : 指定需要绑定的 data 字段
3. actions : 指定需要映射的 actions 方