小程序-全局数据共享

目录

1.什么是全局数据共享

2. 小程序中的全局数据共享方案

MboX

1. 安装 MobX 相关的包

2. 创建 MobX 的 Store 实例

3. 将 Store 中的成员绑定到页面中

4. 在页面上使用 Store 中的成员

5. 将 Store 中的成员绑定到组件中

6. 在组件中使用 Store 中的成员

1.什么是全局数据共享

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

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

2. 小程序中的全局数据共享方案

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

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

mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用（相当于是桥梁，连接了store和每个包的关系）

MboX

1. 安装 MobX 相关的包

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

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

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

若miniprogram_npm目录小出现如下包，即构建成功：

2. 创建 MobX 的 Store 实例

3. 将 Store 中的成员绑定到页面中

4. 在页面上使用 Store 中的成员

通过data-step决定加一还是减一

调试器输出：

调用updateNum1()方法实现numA自增加一和自增减一

5. 将 Store 中的成员绑定到组件中

示例代码如下：

6. 在组件中使用 Store 中的成员

效果如下：

按下按钮则可同时实现自增加一或自增减一