【微信小程序】 全局数据共享

 

1.什么是全局数据共享

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

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

 

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

在小程序中，可使用mobx-miniprogram

配合mobx-miniprogram-bindings实现全局数据共享。

其中:

● mobx- miniprogram

　　用来创建Store实例对象

● mobx-miniprogram-bindings

　　用来把Store中的共享数据或方法,绑定到组件或页面中使用

 

3、MOBX安装

需要先有NPM支持

?

1	https://www.cnblogs.com/mindzone/p/16223460.html

安装MOBX依赖

?

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

安装完成后，每次都要删除之前构建Miniprogram_npm包

然后重新构建生成

 

4、编写Store文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/**  * /store/index.js  * 导入Mobx包资源  */ import { action, observable } from 'mobx-miniprogram'   const config = {   // 配置对象中，存放需要共享的数据字段   numA:1,   numB:2,     // 设置只读的计算属性 get 标记该数据只能只读   get sum() { return this.numA + this.numB },     // actions方法， 用来修改store中的数据   updateNum1: action(function (step) {     this.numA += step   }),   updateNum2: action(function (step) {     this.numB += step   }), } // 导出资源 export const store = observable(config)

　　

5、绑定页面

在页面的JS文件中导入资源：

?

1 2	import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from '../../store/index'

加载时绑定Store资源

?

1 2 3 4 5 6 7 8 9 10 11 12 13

/**  * 生命周期函数--监听页面加载  */ onLoad(options) {   // 页面加载时设置绑定   this.storeBindings = createStoreBindings(     this, {       store,       fields: ['numA', 'numB', 'sum'],       actions: ['updateNum1', 'updateNum2']     }   ) },

结束时解除Store资源

?

1 2 3 4 5 6 7

/**  * 生命周期函数--监听页面卸载  */ onUnload() {   // 解除绑定   this.storeBindings.destoryStoreBindings() },

6、使用Store配置：

store变量页面展示

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<view>   {{numA}} + {{numB}} = {{sum}} </view> <van-button   data-step="{{1}}"   type="primary"   bindtap="btnHandler1">   numA + 1 </van-button>   <van-button   data-step="{{-1}}"   type="danger"   bindtap="btnHandler2">   numA - 1 </van-button>

绑定的方法，这里演示了如何获取dataset变量

?

1 2 3 4 5 6

btnHandler1(e) {   this.updateNum1( e.target.dataset.step) }, btnHandler2(e) {   this.updateNum1( e.target.dataset.step) }

　　

7、配置Store到组件中使用

 组件引入Mobx资源：

?

1 2	import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' import { store } from '../../store/index'

绑定Store和对应的属性：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// components/test6/test6.js Component({   behaviors: [storeBindingsBehavior],     storeBindings: {     store,       // 声明绑定的字段     fields: {       // 写法一       numA: () => store.numA,       // 写法二       numB: (store) => store.numB,       // 写法三       sum: 'sum'     },     // 绑定的方法     actions: {       updateNum2: 'updateNum2'     }   } })

方法编写：

?

1 2 3 4 5 6 7 8 9 10 11

/**  * 组件的方法列表  */ methods: {   btnHandler1(e) {     this.updateNum2( e.target.dataset.step)   },   btnHandler2(e) {     this.updateNum2( e.target.dataset.step)   } }

组件HTML代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!--components/test6/test6.wxml--> <text>components/test6/test6.wxml</text> <view>   {{numA}} + {{numB}} = {{sum}} </view> <van-button   data-step="{{1}}"   type="primary"   bindtap="btnHandler1">   numB + 1 </van-button>   <van-button   data-step="{{-1}}"   type="danger"   bindtap="btnHandler2">   numB - 1 </van-button>

　　

在页面和组件能够共同操作Store存储的变量：