小程序共享全局状态

1 初始化包管理配置文件

npm init -y

2 安装Mobx

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

注：没有执行1就安装包，无法生成miniprogram_npm

目录结构如下：

3 生成miniprogram_npm

小程序开发者工具 ：选择工具菜单下的构建npm

注：每安装一个依赖包需要先删除miniprogram_npm再重新构建

3 创建Store实例

// ../../store/index.js
//在这个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中的数据
    updateNum1:action(function(step){
        this.numA += step
    }),
    updateNum2:action(function(step){
        this.numB += step
    }),
  
})

4 在page中的使用

// pages/message/message.js
// 导入指定的方法
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/index.js'
Page({
    data: {},
    btnHandler1(e){
        console.log(e)
        this.updateNum1(e.target.dataset.step)
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // 将需要的属性字段和方法绑定到当前页面的yhis
        this.storeBindings=createStoreBindings(this,{
            // 数据源
            store,
            // 需要绑定的数据和计算值绑定到页面
            fields:['numA','numB','sum'],
            // 需要绑定的方法
            actions:['updateNum1','updateNum2']
        })
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        this.storeBindings.destroyStoreBindings()
    }
})
​
// 页面
<text>numA的值：{{numA}}</text>
<view>numB的值：{{numB}}</view> 
<view>{{numA}} + {{numB}} = {{sum}}</view>
<view></view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA-1</van-button>

5 在组件中使用

// components/numbers/numbers.js
// 按需导入
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
// 导入实例
import {store} from '../../../../store/index.js';
Component({
    // 实现自动绑定
    behaviors:[storeBindingsBehavior],
    // 绑定关系
    storeBindings:{
        // 数据源
        store,
        fields:{
            // 映射的字段:store里的字段被映射
            NumA:'numA',
            NumB:'numB',
            sum:'sum'
        },
        actions:{
            updateNum2:'updateNum2'
        }
    }
})
​
// 页面
<text>numA的值：{{NumA}}</text>
<view>numB的值：{{NumB}}</view> 

\