小程序全局状态管理：使用MobX进行跨组件数据共享详解（九）

一、定义

全局数据共享（又叫：状态管理）是为了解决组件之间数据共享的问题；

全局数据共享方案：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>