一、定义
全局数据共享（又叫：状态管理）是为了解决组件之间数据共享的问题；
全局数据共享方案：VueX、Redux、MobX等；
二、小程序全局数据共享方案
使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享；
mobx-miniprogram用来创建Store实例对象
mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中
三、安装mobx
# 安装最新包
npm install --save mobx-miniprogram mobx-miniprogram-bindings
# 指定版本
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1四、创建Store实例
注意：只能通过函数修改store中值，不能直接修改
// 在这个 JS文件中，专门创建Store实例对象// 导入mobx-miniprogram中observable,action这两个方法
import {observable,action} from 'mobx-miniprogram'// 导出
export const store = observable ({// 挂载共享数据numA:1,numB:2,// 计算属性 get代表只读get sum() {return this.numA + this.numB},// 定义action函数，特意修改store中数据的值updateNum1: action(function(step) {this.numA += step}),// 定义action函数，特意修改store中数据的值updateNum2: action(function(step) {this.numB += step})
})
五、将Store中的成员绑定到页面中
实现思路：
1、在页面js中引入mobx-miniprogram-bindings和store
2、在页面加载中通过bindings加载函数
3、在onUnload中清楚数据
操作：
/*** 生命周期函数--监听页面加载*/onLoad(options) {// createStoreBindings(当前页面实例，page对象)// page对象：{数据源，需要绑定的属性，需要绑定的方法}this.storeBindings = createStoreBindings(this,{store,fields:['numA','numB','sum'],actions:['updateNum1']})},/*** 生命周期函数--监听页面卸载*/onUnload() {this.storeBindings.destroyStoreBindings}六、在页面中使用Store中的成员
<view> {{numA}} + {{numB}} = {{sum}}</view>
<van-button type='primary' bindtap="updateNumA" data-step="{{1}}">+1</van-button>
<van-button type='danger' bindtap="updateNumA" data-step="{{-1}}">-1</van-button>
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Page({/*** 页面的初始数据*/data: {username:'ZhangSan',country:'CHINA'},updateNumA(e) {this.updateNum1(e.target.dataset.step)},/*** 生命周期函数--监听页面加载*/onLoad(options) {// createStoreBindings(当前页面实例，page对象)// page对象：{数据源，需要绑定的属性，需要绑定的方法}this.storeBindings = createStoreBindings(this,{store,fields:['numA','numB','sum'],actions:['updateNum1']})},/*** 生命周期函数--监听页面卸载*/onUnload() {this.storeBindings.destroyStoreBindings}
})七、在组件中使用Store中的成员
// components/numbers/numbers.js
// 第一步 导入包
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Component({// 第二步 绑定属性behaviors: [storeBindingsBehavior],storeBindings: {// 数据源store,// 属性fields:{numA:'numA',numB:'numB',sum:'sum'},actions: {updateNum2: 'updateNum2'}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {// 第四步 调用方法updateNumB (e) {this.updateNum2(e.target.dataset.step)}}
})
<!-- 第三步 绑定数据 -->
<van-button type="primary" bindtap="updateNumB" data-step="{{1}}">+1</van-button>
<van-button type="danger" bindtap="updateNumB" data-step="{{-1}}">-1</van-button>
<view>························</view>
<my-numbers></my-numbers>
)
