1、首先安装MOBX
在项目所在目录下,右键选择【在外部终端窗口中打开】,运行:
npm install --save [email protected] [email protected]
成功之后,在微信开发者工具中点击【工具】-【构架npm】,到此安装工作完成。
2、将需要共享的数据放在一个store.js文件中,导入mobx-miniprogram,需要共享的数据有字段num1,num2,方法sum(),updateNum1,updateNum2,注意:需要更改共享数据的方法使用:action修饰
import {
observable,
action
} from 'mobx-miniprogram'
export const store = observable({
num1: 1,
num2: 2,
get sum() {
return this.num1 + this.num2
},
updateNum1: action(function (step) {
this.num1 = this.num1 + step
}),
updateNum2: action(function (step) {
this.num2 = this.num2 + step
})
})
3、在页面中引用store
首先导入mobx-miniprogram-bindings
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
在onLoad生命周期函数中
onLoad(options) {
this.storeBindings = createStoreBindings(this,
{
store,
fields:['num1','num2','sum'],
actions:['updateNum1','updateNum2']
})
}
在onUnload生命周期函数中
onUnload() {
this.storeBindings.detroyStoreBindings()
}
4、页面上显示共享数据:
wxml文件:
<button bindtap="addNum1" data-step="{
{1}}">+1</button>
<button bindtap="addNum2" data-step="{
{1}}">+1</button>
<view>num1:{
{num1}}+num2:{
{num2}}={
{sum}}</view>
在事件中就可以使用共享的方法:
addNum1(e){
console.log(e)
this.updateNum1(e.target.dataset.step)
}
如何在组件中使用共享数据呢?
在组件的js文件中导入mobx-miniprogram-bindings,然后在Component节点中声明数据。组件和上述页面引入mobx-miniprogram-bindings是不同的
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../store/store'
Component({
behaviors:[storeBindingsBehavior],
storeBindings:{
store,
fields:{
num1:'num1',
num2:'num2',
sum:'sum'
},
actions:{
updateNum1:'updateNum1',
updateNum2:'updateNum2'
}
}
}
在组件中显示共享数据方式与页面显示数据方式相同,在此不再赘述。