微信小程序之mobx-miniprogram状态管理

目前已经学习了6种小程序页面、组件间的数据通信方案,分别是:

1. 数据绑定: properties

2.获取组件实例: this.selectComponent()

3.事件绑定: this.triggerEvent()

4. 获取应用实例：getApp()

5. 页面间通信: EventChannel

6.事件总线:pubsub-js

在中小型项目中，使用这些数据通信方式已经能够满足我们项目的需求。但是随着项目的业务逻辑越来越复杂，组件和页面间通信就会变的非常复杂。例如：有些状态需要在多个页面间进行同步使用，一个地方发生变更,所有使用的地方都需要发生改变,这时候如果使用前面的数据通信方案进行传递数据,给管理和维护将存在很大的问题。为了方便进行页面、组件之间数据的传递，小程序官方提供了一个扩展工具库：mobx-miniprogram

框架扩展: mobx-miniprogram:

mopx-miniprogram 是针对微信小程序开发的一个简单、高效、轻量级状态管理库，它基于 Mobx 状态管理框架实现。

使用 mobx-miniprogram 定义管理的状态是响应式的，当状态一旦它改变，所有关联组件都会自动更新相对应的数据通过该扩展工具库,开发者可以很方便地在小程序中全局共享的状态,并自动更新视图组件,从而提升小程序的开发效率

需要注意:在使用 mobx-miniprogram 需要安装两个包:

mobx-miniprogram 和 mobx-miniprogram-bindings

npm install mobx-miniprogram mobx-miniprogram-bindings mobx-miniprogram 的作用:创建 Store 对象,用于存储应用的数据mobx-miniprogram-bindings 的作用:将状态和组件、页面进行绑定关联,从而在组件和页面中操作数据安装完毕后,不要忘了左上角---编辑---构建 创建Store:

需要使用 mobx-miniprogram ,因此需要先熟悉 mobx-miniprogram 三个核心概念:

1. observable: 用于创建一个被监测的对象,对象的属性就是应用的状态(state),这些状态会被转换成响应式数据。

2. action: 用于修改状态（state）的方法，需要使用 action 函数显式的声明创建。

3. computed: 根据已有状态(state)生成的新值。计算属性是一个方法，在方法前面必须加上 get 修饰符

---

在项目的根目录下创建 store 文件夹,然后在该文件夹下新建 numStore.js (名字任意)在 /store/numStore.js 导入 observable、action 方法 import { observable, action } from 'mobx-miniprogram' export const numStore = observable({ // 对象的属性就是应用的状态 numA:1, numB:2, // 定义 action 方法,用来修改状态 update: action(function(){ // 在方法中如果需要获取状态,可以使用 this 进行获取 this.numA += 1 this.numB += 1 }) // 计算属性 computed // 是根据已有状态产生新的状态 // 计算属性前面需要使用 get 修饰符进行修饰 get sum(){ // 计算属性内部必须要有返回值 retrun this.numA + this.numB } }) 通用方法:在组件中使用数据

使用 mobx-miniprogram-bindings 将 Store 和页面或组件进行绑定关联

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

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

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

1. store: 指定要绑定的 Store 对象

2. fields: 指定需要绑定的 data字段

3. actions: 指定需要映射的 actions 方法

// 如果需要在组件中使用 Store 中的数据以后方法 // 需要从 mobx-miniprogram-bindings 里面引入 Componentwithstore 方法 import { ComponentwithStore } from 'mobx-miniprogram-bindings' // 导入当前组件需要使用的 Store 对象 import{ numStore } from '../../stores/numstore' // 需要使用 ComponentwithStore 方法将 Component 方法进行替换 ComponentwithStore({ // 用来配置当前组件需要与哪些Store进行关联 storeBindings: { store: numStore, // 当前组件需要使用number store 这一个对象 fields: ['numA', 'numB', 'sum'], // 当前组件需要使用这个sotre中的那些数据 actions: ['update'] } })

注意: 在从 Stroe 对象中引入数据和方法以后

如果是数据,会被注入到data对象中如果是方法,会被注入到methods对象中 <view> {{ numA}} + {{ numB }} = {{sum}} </view> <button type="warn" plain bindtap="update">更新 Store 中的数据</button>

上面由于 update方法被注入到methods当中,所以可以在模版中直接调用

第一种:使用Component方法来构建页面组件中使用Store

方法和上面正常的使用方式是一样的

1.从 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法

2.将 Component 方法替换成 Componentwithstore 方法

3.然后配置 storeBindings 从Store 中映射数据和方法即可

第二种:不使用Component 方法构建页面组件中使用Store 这时候需要使用 mobx-miniprogram-bingings 提供的 Behaviorwithstore方法来和 Store 建立关联。 Behaviorwithstore 定义在当前组件 or 页面根目录下 的 behavior.js中我们去配置Behaviorwithstore 具体和哪些Store联系,供当前页面使用

小程序的behavior方法是一种代码复用的方式,可以将一些通用的逻辑和方法提取出来,然后在多个组件中复用,从而减少代码冗余,提高代码的可维护性。在页面中也可以使用 behaviors 配置项

使用方法:

1. 新建 behavior.js 文件,从 mobx-miniprogram-bindings 库中导入 BehaviorWithstore 方法

2.在BehaviorWithstore方法中配置 storeBindings 配置项从 Store 中映射数据和方法

3. 在 Page 方法中导入创建的 behavior ,然后配置 behavior 属性，并使用导入的 behavior

---

关联store初始化

cart.js中注册(当前需要使用的页面注册) 注册完毕后会自动映射到data中,相当于已经取出了store中的内容放到data中了,可以直接调用

直接可以在页面中使用:

fields、actions 对象写法

fields、actions 有两种写法：数组 或者 对象。

我们之前使用的是 数组 的写法:

fileds: ['numA','numB','sum'], actions: ['update']

下面介绍一下对象的写法:

filelds的对象写法 映射写法函数写法 fields: { // 两种写法: // 映射形式: 需要指定 data 中哪些字段来源于 store,以及 在 store 中的名字是什么 numA: 'numA', numB: 'numA', numC: 'numA' // 函数形式 // key: data 中哪些字段来源于 store // value: 函数, 函数内部需要返回对应 store 数据的值 numA: () => numStore.numA, numB: () => numStore.numB, numC: () => numStore.numC, // 自定义属性 // 如果对属性进行了自定义，模板中需要使用自定义以后的属性 a: 'numA', b: 'numB', total: 'sum' }

在对象写法中可以通过自定义属性来重新命名,使用了自定义属性后,模版中的属性也必须对应自定义属性

action的对象写法: 映射写法 自定义属性 actions:{ // 如果将 actions 改成对象写法 // actions 只有映射形式一种写法 // 指定模板中使用的哪些方法来源于 store，并且在 store 中的名字是什么 updateData: 'update }

绑定多个组件以及命名空间

在实际开发中,一个页面或者组件可能会绑定多个 Store ,这时候我们可以将storeBindings 改造成数组。数组每一项就是一个个要绑定的 Store。

如果多个 Store 中存在相同的数据,显示会出现异常。还可以通过 namespace 属性给当前 Store 开启命名空间,在开启命名空间以后,访问数据的时候,需要加上 namespace 的名字才可以。

两者store中有变量或方法冲突了

有两种解决方式:

第一种: 将 fields 以及 actions 改成对象方式

第二种:添加命名空间

访问命名空间的数据