前言
全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有:Vuex、Redux、MobX 等。
一. 安装
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@2.1.5
安装完之后要重新构建 工具---->构建npm
二. 创建store文件夹以及store.js
import { observable, action } from 'mobx-miniprogram';// observable 的返回值就是 store 对象
export const store = observable({// 需要挂载的数据 -- 数据字段numA: 1,// 计算属性 -- get为修饰符// get sum() {// return this.numA + this.numB;// },// actions 函数,专门来修改 store 中数据的值updateNum1: action(function (step) {this.numA += step;}),
})
三. 在page页面中使用 stroe
其中在页面上 我就直接拿this.data.numA以及方法this.updateNum1(); 使用就行
import {createStoreBindings} from 'mobx-miniprogram-bindings';
import {store} from '../../store/store';Page({/*** 生命周期函数--监听页面加载*/onLoad(options) {this.storeBindings = createStoreBindings(this, {store,fields: ['numA'],actions: ['updateNum1']})},/*** 生命周期函数--监听页面卸载*/onUnload() {this.storeBindings.destroyStoreBindings();},
})
四. 在成员组件中使用store
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Component({// 通过 storeBindingsBehavior 来实现自动绑定behaviors:[storeBindingsBehavior],storeBindings:{store,fields:{// 绑定字段的三种方式numA: () => store.numA,numB: (store) => store.numB,sum: 'sum'},actions:{updateNum2: 'updateNum1'}},})