微前端架构如何改变企业的开发模式与效率提升
693
2022-10-09
在微信小程序中使用mobx(在微信小程序中使用了更加安全的https协议)
mobx-wxapp
在小程序中使用mobx,connect函数可将被观察的数据高效的绑定到小程序视图。 旧的inject方式见v1
安装
npm install mobx-wxapp 安装项目到本地 或 直接拷贝文件(example/mobx-wxapp.js)到您的项目。
(案例使用了 mobx.js v4.6.0 ,因 mobx5 使用了小程序暂不支持的 ES6 proxy)
用法
pages/index.js:
import { connect, extract } from '../mobx-wxapp'import { observable } from '../mobx'const appStore = observable({ title: 'mobx-wxapp'})const store = observable({ // observable seconds: 0, // computed get color() { return this.seconds % 2 ? 'red' : 'green' }, // actions tick() { this.seconds += 1 }})// pagePage({ onLoad() { connect(this, () => ({ title: appStore.title, color: store.color, seconds: store.seconds // 或者使用 extract 一次性提取全部属性 // ...extract(store) }) ) }, add() { store.tick() }})
pages/index.wxml:
当然,您也可在 Component 中使用:
Component({ //.. ready(){ this.disposer = connect(this,mapDataToStore,options) }, //请务必在组件生命周期结束前执行销毁器! detached(){ this.disposer(); } //...})
API
connect(context,mapDataToStore,options?)
context:Object // 请传入thismapDataToStore:Function //需要绑定到视图的映射函数options:Object // 可选参数
options = { delay:Number,// setData的最小执行间隔,默认30ms setDataCallback:Function // setData的执行回调}
返回值:connect返回一个销毁器函数(在 Page 中使用时将自动在 onUnload 生命周期执行,但在 Component 构造器中使用时请确保在生命周期结束时手动调用此函数)。
extract(store)
映射整个store的快捷方式
store:Object // 一个被观察的store对象
返回值:一个可被映射到data的对象
应用
License
ISC licensed.
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~