文章目录
mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享
mobx-miniprogram用来创建Store实例对象
mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用
安装MobX相关的包
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意:MobX相关的包安装完毕之后,记得删除miniprogram_npm目录后,在选项中重新构建npm。
根目录创建store文件夹,添加store.js文件
store.js
//在这个JS文件中,专门创建Store的实例对象
import {action, observable} from "mobx-miniprogram"
export const store = observable({
//里面声明共享数据
numA:1,
numB:2,
//读取
get sum(){
return this.numA+this.numB
},
//修改
updateNum1:action(function(step){
this.numA += step
}
),
updateNum2:action(function(step){
this.numB += step
}
),
})
绑定到页面中
//页面的.js文件
import{createStoreBindings } from'mobx-miniprogram-bindings'//绑定方法
import{store}from'../../store/store'//实例对象映射到当前页面
Page({
onLoad:function(){//生命周期函数--监听页面加载
//第一个参数this代表该页面实例,第二个参数「store,fields,actios」分别代表数据源,字段,方法
//自定义属性storeBindings为createStoreBindings方法的返回值
this.storeBindings = createStoreBindings(this,{
store,
fields:['numA','numB','sum'],
actions:['updateNum1']
})
},
onUnload:function(){//生命周期函数--监听页面卸载
//清理绑定的数据和方法
this.storeBindings.destroyStoreBindings()
}
绑定到组件
//组件的.js文件
import{storeBindingBehavior} from'mobx-miniprogram-bindings'//绑定方法
import{store}from'../../store/store'//实例对象映射到当前组件
Compoent({
behaviors:[storeBindingsBehavior],//通过storeBindingsBehavior来实现自动绑定
storeBindings:{
store,//指定要绑定的Store
fields:{//指定要绑定的字段数据
numA:()=>store.numA,//绑定字段的第一种方式
numB:()=>store.numA,//绑定字段的第二种方式
sum:'sum' //绑定字段的第三种方式
},
actions:{//指定要绑定的方法
updateNum2:"updateNum2"
}
},
})