小程序 – MobX 全局数据共享

什么是全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。

引入 MobX

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：

lmobx-miniprogram 用来创建 Store 实例对象

mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

在项目中运行如下的命令，安装 MobX 相关的包：

注意：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。

创建 Store 数据仓库

1.mobx-miniprogram 中按需引入 observable 和action

2.调用 observable 方法，内部传入一个对象参数，定义普通数据，定义计算属性需要在前面加上 get 修饰符

3.定义用于更改数据的 action 方法，需要使用 action() 传入函数，调用时传入的参数会被action()中的传入函数接收

4.把 observable 导出供其它 js 调用

绑定到页面

1.页面 js 文件中，mobx-miniprogram-bindings 传入中按需传入 createStoreBindings 和 store 源数据文件

2.在onLoad 方法中，调用 createStoreBindings 分别传入两个属性，第一个属性是数据源 store ,第二个属性为一个对象，里面包含fields 用于定义需要用到那个数据，avtions用于定义需要用到那个函数。定义名称不需要和数据源中的对应名称一致。

3.把 createStoreBindings 的函数存在 this.storeBindings 中以备后用。

4.在onUnload 中调用this.storeBindings.destoryStoreBindings()以在页面关闭时取消绑定数据

页面上使用 store 数据

1.正常使用数据就可

2.调用函数时，可以传入 event参数，会被 action 函数所接收

绑定到组件中

1.从 mobx-miniprogram-bindings 中按需导入 storeBindingsBehavor 和 store 数据源

2.在组件中，把 storeBindingsBehavor 引入到 behaviors 中.

3.设置属性 storeBindings  ，传入三个参数，第一个参数是数据源 store ,第二个参数是 fields ,定义需要用到的数据名，其中定义数据名中，取得 store 数据源的方法有三种。第三个参数是需要调用的 action .

在组件中使用 store

1.正常使用数据就可

2.调用函数时，可以传入 event参数，会被 action 函数所接收