1、执行命令
npm install --save mobx-miniprogram mobx-miniprogram-bindings
2、重新安装npm
3、创建store.js
地址举例:/store/store.js
import {
observable,
action
} from 'mobx-miniprogram'
export const store = observable({
// 设置共享数据
num1: 1,
num2: 2,
// getters 计算属性
get sum() {
return this.num1 + this.num2
},
// action 操作数据的方法
updateNum1: action(function (num) {
this.num1 += num
}),
updateNum2: action(function (num) {
this.num2 += num
})
})
4、在Pages页面中引入
import {createStoreBindings} from'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
// ...
// 页面加载
onLoad: function (options) {
// 手工绑定
this.storeBindings = createStoreBindings(this, {
store,
fields: ['num1', 'num2', 'sum'],
actions: ['updateNum1', 'updateNum2']
})
},
// 通过事件处理函数 调用store 中的方法
num1Handel(){
this.updateNum1(1)
},
num2Handel(){
this.updateNum2(-1)
},
// 页面初次渲染完成
onReady: function () {
// 测试是否获取成功
console.log(this.data.num1);
},
// 页面卸载
onUnload: function () {
// 一定要调用清理函数,否则将导致内存泄漏!
this.storeBindings.destroyStoreBindings()
},
})
5、在组件Component中引用
import {
storeBindingsBehavior
} from "mobx-miniprogram-bindings"
import {
store
} from '../../store/store'
Component({
// behavior 绑定
behaviors: [storeBindingsBehavior],
storeBindings: {
store,
fields: {
num1: () => store.num1,
num2: storeBe => storeBe.num2,
sum: 'sum'
},
actions: {
updateNum1: 'updateNum1',
updateNum2: 'updateNum2',
}
},
// 使用store 方法
methods: {
num1Handel(){
this.updateNum1(1)
},
num2Handel(){
this.updateNum2(-1)
}
}
})