18.全局数据共享

  • Post author:
  • Post category:其他


就像 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的时候,页面与组件的数据都会发生改变



版权声明:本文为potato123232原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。