（十六）全局数据共享-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

注意：Mobx相关包安装完，删除miniprogram_npm，重新构建npm

创建Mobx的Store实例

在项目根目录下新建store目录，专门存储所有mobx相关js文件，然后创建store.js，专门用来创建mobx的store实例对象

// store/store.js
import { observable, action } from 'mobx-miniprogram'

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

store成员绑定到页面中

// 展示页面对应js文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({
    onLoad() {
        // 挂载storeBindings，便于销毁
        // createStoreBindings中传入两个参数，第一个为页面实例，第二个是配置对象
        this.storeBindings = createStoreBindings(this, {
            store, // 数据源
            fields: ['numA', 'numB', 'sum'], //使用字段
            actions: ['updateNum1'] // 使用方法
        })
    },
    onUnload() {
        // destroyStoreBindings清除
        this.storeBindings.destroyStoreBindings()
    }
})

在页面中展示store中成员：

store成员绑定到组件中

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({
    // 通过 storeBindingsBehavior 实现自动绑定
    behaviors: [storeBindingsBehavior],
    storeBindgs: {
        store,
        fields: {...},
        actions: {...}
    }
})

在组件中使用store中成员：