program

数据绑定properties获取组件实例this.selectComponent()事件绑定this.triggerEvent()获取应用实例getApp()页面间通信EventChannel事件总线pubsub-js

在中小型项目中使用这些数据通信方式已经能够满足我们项目的需求。

但是随着项目的业务逻辑越来越复杂组件和页面间通信就会变的非常复杂。

例如有些状态需要在多个页面间进行同步使用一个地方发生变更所有使用的地方都需要发生改变这时候如果使用前面的数据通信方案进行传递数据给管理和维护将存在很大的问题。

为了方便进行页面、组件之间数据的传递小程序官方提供了一个扩展工具库

mobx-miniprogram

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

mobx-miniprogram

定义管理的状态是响应式的当状态一旦它改变所有关联组件都会自动更新相对应的数据

通过该扩展工具库开发者可以很方便地在小程序中全局共享的状态并自动更新视图组件从而提升小程序的开发效率

需要注意在使用

对象用于存储应用的数据mobx-miniprogram-bindings

的作用将状态和组件、页面进行绑定关联从而在组件和页面中操作数据

npm

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

action用于修改状态(state)的方法需要使用

action

函数显式的声明创建。

computed根据已有状态(state)生成的新值。

计算属性是一个方法在方法前面必须加上

get

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

state

或者Component中对共享的数据进行读取、更新操作需要使用

Store

components/custom01/custom01.js

import

../../stores/numstoreComponentWithStore({data:

{someData:

../../stores/numstoreComponentWithStore({data:

{someData:

方法是一种代码复用的方式可以将一些通用的逻辑和方法提取出来然后在多个组件中复用从而减少代码冗余提高代码的可维护性。

在页面中也可以使用

behaviors

BehaviorWithStore({storeBindings:

{store:

../../stores/numstoreComponentWithStore({data:

{someData:

BehaviorWithStore({storeBindings:

[{namespace:

miniprogram-computedComponentWithComputed({data:

{a:

计算属性具有缓存计算属性使用多次但是计算属性方法只会执行一次console.log(~~~~~)return

data.a

miniprogram-computedComponentWithComputed({data:

{a:

require(miniprogram-computed).behaviorComponentWithStore({behaviors:

{a:

../../stores/numstoreComponentWithComputed({behaviors:

{a: