在微信小程序中使用mobx(在微信小程序中使用了更加安全的https协议)

网友投稿 693 2022-10-09

在微信小程序中使用mobx(在微信小程序中使用了更加安全的https协议)

在微信小程序中使用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:

{{ title }} : seconds:{{ seconds }}

当然,您也可在 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小时内删除侵权内容。

上一篇:hprose 的微信小程序专用版(hprose for python)
下一篇:How to have a good regimen
相关文章

 发表评论

暂时没有评论,来抢沙发吧~