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

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

数据绑定: properties

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

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

获取应用实例：getApp()
页面间通信: EventChannel

6.事件总线:pubsub-js

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

框架扩展: mobx-miniprogram:

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

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

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

mobx-miniprogram 和 mobx-miniprogram-bindings

bash 复制代码

npm install mobx-miniprogram mobx-miniprogram-bindings

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

创建Store:

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

observable: 用于创建一个被监测的对象,对象的属性就是应用的状态(state),这些状态会被转换成响应式数据。
action: 用于修改状态（state）的方法，需要使用 action 函数显式的声明创建。
computed: 根据已有状态(state)生成的新值。计算属性是一个方法，在方法前面必须加上 get 修饰符

在项目的根目录下创建 store 文件夹,然后在该文件夹下新建 numStore.js (名字任意)
在 /store/numStore.js 导入 observable、action 方法

javascript 复制代码

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 配置项，配置项常用的属性有以下三个：

store: 指定要绑定的 Store 对象
fields: 指定需要绑定的 data字段
actions: 指定需要映射的 actions 方法

javascript 复制代码

// 如果需要在组件中使用 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对象中

javascript 复制代码

<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 配置项

使用方法:

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

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

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

关联store初始化

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

直接可以在页面中使用:

fields、actions 对象写法

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

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

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

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

filelds的对象写法

映射写法
函数写法

javascript 复制代码

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的对象写法:

映射写法
- 自定义属性

javascript 复制代码

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

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

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

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

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

有两种解决方式:

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

第二种:添加命名空间

访问命名空间的数据