18.全局数据共享 mobx-miniprogram与mobx-miniprogram-bindings

就像 vue 用 vuex 做全局数据共享一样，在小程序中 使用 mobx-miniprogram配合mobx-miniprogram-bindings 做数据共享

mobx-miniprogram是创建store实例对象的。mobx-miniprogram-bindings把store中共享的数据与方法绑定到组件或页面中

目录

1  安装

2  创建store

3  初始化store数据

4  在页面中使用store

4.1  配置

4.2  使用store的数据

4.3  使用store的方法

5  在组件上使用store

5.1  配置

5.2  使用

6  只要有一处更新，那么所有用store的数据都会更新

---

1  安装

安装之后点击 工具 -> 构建npm

2  创建store

在项目根目录下创建名为 store 的文件夹，然后在文件夹store下创建store.js

然后写入如下内容

这样一个最基本的store就创建完毕了

3  初始化store数据

我们以data，计算属性与方法为例

计算属性需要在属性名的前面写get，方法需要import action

4  在页面中使用store

4.1  配置

在加载页面的时候，绑定页面与store

• 这里没有引入updateNum2是证明你不必将store的所有东西都引入进来

在页面卸载的时候解绑页面与store

4.2  使用store的数据

直接用就行了

在js中直接用 this.data.[属性名] 就能用了

我们搞个按钮测一下

点击后可以打印sum值

4.3  使用store的方法

首先需要自己定义一下方法

然后用这个方法就行了

点击numA+1，numA会+1

点击numA-1，numA会-1

5  在组件上使用store

5.1  配置

组件上配置store原理是使用behavior

• fields中的numA,numB与sum是三种不同的绑定方式，你用哪一种都行

5.2  使用

组件使用store的方式与页面使用store的方式相似，我们简单做个例子

点击numB+1,numB就可以+1

点击numB-1,numB就可以-1

6  只要有一处更新，那么所有用store的数据都会更新

我们上面分别在页面与组件中使用了store，现在我们把他们放到一起对比看一下

当我点击numA+1的时候，页面与组件的数据都会发生改变