【愚公系列】2022年11月 微信小程序-全局数据共享

---

前言

开发中经常会遇到组件共享数据的问题，在各种前端框架中都会有对应的全局共享组件，全局数据共享是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：

• mobx-miniprogram 用来创建 Store 实例对象
• mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

一、MobX的使用

1. 安装 MobX 相关的包

在项目中运行如下的命令，安装 MobX 相关的包：

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

注意：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。

2. 创建 MobX 的 Store 实例

创建store.js用来创建store实例：

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

// ES6 的导出语法
export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  // 计算属性
  get sum(){
    return this.numA + this.numB
  },
  // actions 函数，专门用来修改 store 中数据的值
  updateNum1: action(function (step) {
    this.numA += step
  }),
  updateNum2: action(function (step) {
    this.numB += step
  }),
})

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

3.页面中使用Store成员

<view>
{{numA}} +{{numB}} = {{sum}}
<button type="primary" bindtap="btn1" data-step="{{1}}">numA+1</button>
<button type="primary" bindtap="btn1" data-step="{{-1}}">numA-1</button>
</view>
1
2
3
4
5

// 页面的.js文件
import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.storeBindings = createStoreBindings(this,{
            store,
            fields:['numA','numB','sum'],
            actions:['updateNum1']
        })
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        this.storeBindings.destroyStoreBindings()
    },
    btn1(e){
    	this.updateNum1(e.target.dataset.step)
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

​createStoreBindings​​​方法接收两个参数，一个是​​this​​代表当前页面的实例，第二参数是配置对象，包含三个属性：

• ​​store​​代表数据源
• ​​fields​​代表我们需要将哪些字段绑定到我们的页面中
• ​​actions​​代表我们需要将哪些方法绑定到我们的页面中

​​createStoreBindings​​​的调用有一个返回值，我们将这个返回值挂载到了当前页面上作为一个自定义属性storeBindings​​​而存在，这样我们就可以在页面卸载时利用​​storeBindings​​来清理挂载的Store实例

4.组件中使用Store成员

{{numA}}+{{numB}}={{sum}}
<button type="primary" bindtap="Cbtn1" data-step="{{1}}">CnumA+1</button>
<button type="primary" bindtap="Cbtn1" data-step="{{-1}}">CnumA-1</button>
1
2
3

// components/numbers/numbers.js
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from '../../store/store'
Component({
    //通过storeBindingsBehavior来实现自动绑定
    behaviors:[storeBindingsBehavior],
    storeBindings:{
        //指定要绑定的Store
        store,
        fields:{
            // 绑定字段的第1种方式
            numA:()=>store.numA,
            // 绑定字段的第2种方式
            numB:(store)=>store.numB,
            // 绑定字段的第3种方式
            sum:'sum'
        },
        actions:{
            updateNum2:'updateNum2'
        }
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {
		Cbtn1(e){
		    this.updateNum2(e.target.dataset.step)
		},
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44