一、定義
全局數據共享（又叫：狀態管理）是為了解決組件之間數據共享的問題；
全局數據共享方案：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>
)
