前言
全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有: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'
}
},
})