1. 安装Mobx相关包
npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
2. 构建npm
删除miniprogram_npm文件夹
重新构建npm
3. 创建store实例对象
根目录下创建store文件夹,新建store.js文件用于创建Store实例对象
// 创建Store实例对象
import {observable} from 'mobx-miniprogram'
export const store= observable({
//共享数据
num1:1,
num2:2
})
4. 定义计算属性
方法名前加get ,只可获取,不能修改
//计算属性
get sum(){
return this.num1+this.num2
}
4. 定义Actions方法可以修改数据
import {observable,action} from 'mobx-miniprogram'
//actions
updateNum1:action(function(step){
this.num1+=step
}),
updateNum2:action(function(step){
this.num2+=step
})
5. 将Store成员绑定到页面中
页面js中
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
onLoad函数
this.storeBindings=createStoreBindings(this,{
store,
fields:['num1','num2','sum'],
actions:['updateNum1']
})
onUnload:function(){
this.storeBindings.destoryStoreBings()
}
6. 页面中使用Store
wxml
<view>{{num1}}+{{num2}}={{sum}}</view>
<button bindtap="btn1" data-step="{{1}}">+1</button>
<button bindtap="btn1" data-step="{{-1}}">-1</button>
js
btn1(e){
this.updateNum1(e.target.dataset.step)
}
7. 绑定到组件中
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
behaviors:[storeBindingsBehavior],
storeBindings:{
store,
fields:{
num1:()=>store.num1,
num2:()=>store.num2,
sum:'sum'
},
actios:{
updateNum2:'updateNum2'
}
}
})
组件中使用和页面一样