小程序 状态管理 mobx-miniprogram 和 miniprogram-compute_miniprogram-image-processor

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 方

飞猫网探险资讯