一、什么是全局数据共享

image.png

二、小程序中的全局数据共享方案

image.png

三、安装 MobX 相关的包

3.1. 安装命令

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

3.2. 删除原来的miniprogram_npm

image.png

3.3. 重新构建npm

image.png

3.4. 新的miniprogram_npm

image.png

四、封装store.js

根目录创建store文件夹-->新建store.js

image.png

// 在这个 JS 文件中，专门来创建 store 的实例对象
import { action, observable } from 'mobx-miniprogram'

export const store = observable({
    // 数据字段
    numA: 1,
    numB: 2,
    // 计算属性
    get sum() {
        return this.numA + this.numB
    },
    // actions 方法，用来修改 store 中的数据
    updateNumA: action(function (step) {
        this.numA += step
    }),
    updateNumB: action(function (step) {
        this.numB += step
    }),
})

五、将 store 中的成员绑定到页面中

image.png

// 页面的wxs结构
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.storeBindings = createStoreBindings(this, {
            store,
            fields: ['numA', 'numB', 'sum'],
            actions: ['updateNum1'],
        })
    },

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

// 页面的 .wxml 结构
<view>{{numA}} + {{numB}} = {{sum}}</view>

<van-button type="primary" bind:tap="btnHandler" data-step="{{1}}">numA+1</van-button>
<van-button type="primary" bind:tap="btnHandler" data-step="{{-1}}">numA-1</van-button>

// 页面的 .wxs 结构
// 按钮 tap 事件的处理函数
btnHandler(e) {
     this.updateNumA(e.target.dataset.step)
},

六、将store 中的成员绑定到组件中

image.png

// 组件的wxs结构
// 通过 storeBindingsBehavior 来实现自动绑定
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
    behaviors: [storeBindingsBehavior],
    storeBindings: {
        store, // 指定要绑定的 Store
        fields: { // 指定要绑定的字段数据
            numA: () => store.numA, // 绑定字段的第 1 种方式
            numB: (store) => store.numB,  // 绑定字段的第 1 种方式
            sum: 'sum' // 绑定字段的第 3 种方式
        },
        actions: { // 指定要绑定的方法
            updateNumB: "updateNumB"
        }
    },
})

// 组件的 .wxml 结构
<!--components/numbers/numbers.wxml-->
<view>{{numA}} + {{numB}} = {{sum}}</view>

<van-button type="primary" bind:tap="btnHandler" type="danger" data-step="{{1}}">numB+1</van-button>
<van-button type="primary" bind:tap="btnHandler" type="danger" data-step="{{-1}}">numB-1</van-button>

// 组件的 .wxs 结构
/**
 * 组件的方法列表
 */
methods: {
    // 测试store
    btnHandler(e) {
        this.updateNumB(e.target.dataset.step)
    },
 }