网站速度测速,织梦模板下载,网络运营者应当为(),企业网站建设知识应用技能文章目录 安装MobX相关的包根目录创建store文件夹#xff0c;添加store.js文件绑定到页面中绑定到组件 mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享
mobx-miniprogram用来创建Store实例对象
mobx-miniprogram-bindings用来把Store中的共享数据或方法… 文章目录 安装MobX相关的包根目录创建store文件夹添加store.js文件绑定到页面中绑定到组件 mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享
mobx-miniprogram用来创建Store实例对象
mobx-miniprogram-bindings用来把Store中的共享数据或方法绑定到组件或页面中使用
安装MobX相关的包
npm install --save mobx-miniprogram4.13.2 mobx-miniprogram-bindings1.2.1注意MobX相关的包安装完毕之后记得删除miniprogram_npm目录后在选项中重新构建npm。
根目录创建store文件夹添加store.js文件
store.js
//在这个JS文件中专门创建Store的实例对象
import {action, observable} from mobx-miniprogramexport const store observable({//里面声明共享数据numA:1,numB:2,//读取get sum(){return this.numAthis.numB},//修改updateNum1:action(function(step){this.numA step}),updateNum2:action(function(step){this.numB step}),
})绑定到页面中
//页面的.js文件
import{createStoreBindings } frommobx-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]
})
},
onUnloadfunction{//生命周期函数--监听页面卸载//清理绑定的数据和方法this.storeBindings.destroyStoreBindings()
}
绑定到组件
//组件的.js文件
import{storeBindingBehavior} frommobx-miniprogram-bindings//绑定方法
import{store}from../../store/store//实例对象映射到当前组件Compoent({behaviors:[storeBindingsBehavior],//通过storeBindingsBehavior来实现自动绑定storeBindings:{store,//指定要绑定的Storefields:{//指定要绑定的字段数据numA:()store.numA,//绑定字段的第一种方式numB:()store.numA,//绑定字段的第二种方式sum:sum //绑定字段的第三种方式},actions:{//指定要绑定的方法updateNum2:updateNum2}},
})
