微信小程序状态管理的使用
安装:
npm install --save mobx-miniprogram mobx-miniprogram-bindings
创建store.js文件
// 创建 Store 实例对象
import { observable, action } from 'mobx-miniprogram'export const store = observable({// 数据numA: 1,numB: 2,// 计算属性get sum () {return this.numA + this.numB},// action 函数,修改store中数据的值updateNum1: action(function(step) {this.numA += step}),updateNum2: action(function(step) {this.numB += step})
})
将页面、自定义组件和 store 绑定有两种方式: behavior 绑定 和 手工绑定 。
1. 手工绑定:
手工绑定 适用于全部场景。做法:使用 createStoreBindings 创建绑定,它会返回一个包含清理函数的对象用于取消绑定。
注意:在页面 onUnload (自定义组件 detached )时一定要调用清理函数,否则将导致内存泄漏!
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'Page({data: {},onLoad() {this.storeBindings = createStoreBindings(this, {store,// 将仓库中的数据映射到当前页面this中fields: ['numA', 'numB', 'sum'],actions: ['updateNum1'],})},onUnload() {this.storeBindings.destroyStoreBindings()}
})
2. behavior 绑定
behavior 绑定 适用于 Component 构造器。做法:使用 storeBindingsBehavior 这个 behavior 和 storeBindings 定义段。
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'Component({behaviors: [storeBindingsBehavior],storeBindings: {// 数据源store,fields: {numA: 'numA',numB: 'numB',sum: 'sum'},actions: {updateNum2: 'updateNum2'}}
})
绑定配置
字段名 | 类型 | 含义 |
---|---|---|
store | 一个 MobX observable | 默认的 MobX store |
fields | 数组或者对象 | 用于指定需要绑定的 data 字段 |
actions | 数组或者对象 | 用于指定需要映射的 actions |
fields
fields 有三种形式:
数组形式:指定 data 中哪些字段来源于 store 。例如 ['numA', 'numB', 'sum']
。
映射形式:指定 data 中哪些字段来源于 store 以及它们在 store 中对应的名字。例如 { a: 'numA', b: 'numB' }
,此时 this.data.a === store.numA this.data.b === store.numB
。
函数形式:指定 data 中每个字段的计算方法。例如 { a: () => store.numA, b: () => anotherStore.numB }
,此时 this.data.a === store.numA this.data.b === anotherStore.numB
。
上述三种形式中,映射形式和函数形式可以在一个配置中同时使用。
如果仅使用了函数形式,那么 store 字段可以为空,否则 store 字段必填。
actions
actions 可以用于将 store 中的一些 actions 放入页面或自定义组件的 this 下,来方便触发一些 actions 。有两种形式:
数组形式:例如 ['update']
,此时 this.update === store.update
。
映射形式:例如 { buttonTap: 'update' }
,此时 this.buttonTap === store.update
。
只要 actions 不为空,则 store 字段必填。
延迟更新与立刻更新
为了提升性能,在 store 中的字段被更新后,并不会立刻同步更新到 this.data 上,而是等到下个 wx.nextTick 调用时才更新。(这样可以显著减少 setData 的调用次数。)
如果需要立刻更新,可以调用:
this.updateStoreBindings()
(在 behavior 绑定 中)
this.storeBindings.updateStoreBindings()
(在 手工绑定 中)
微信小程序状态管理的使用相关推荐
- 微信小程序管理软件的技术特点
微信小程序管理软件在提高小程序的安全性.稳定性和可扩展性方面具有重要作用.选择一款优质的微信小程序管理软件,可以帮助企业更好地管理和维护小程序,提高小程序的效率和用户体验,实现企业数字化转型和智能化升 ...
- 微信小程序管理软件助力企业数字化转型,实现智能化升级
随着移动互联网和智能终端的普及,微信小程序已经成为越来越多企业和品牌开展业务的重要应用.微信小程序的用户体验好.使用便捷.功能丰富等特点,为企业带来了更多的商业机会和增长空间.与此同时,微信小程序管理 ...
- 基于Proxy的小程序状态管理
微信小程序的市场在进一步的扩大,而背后的技术社区仍在摸索着最好的实践方案.我在帮助Nike,沃尔玛以及一些创业公司开发小程序后,依旧认为使用小程序原生框架是一个更高效,稳定的选择,而使用原生框架唯独缺 ...
- 微信小程序管理后台介绍
微信小程序的管理后台,每次进入都需要扫码,还是特别不爽,现在微信小程序还没正式发布,很多人都还没看到管理后台,这里抢先发布出来 ------------------------------------ ...
- 北京微信小程序管理公众开放平台
最近小程序的新闻铺天盖地,大动作一个接一个,相信大家都已经蠢蠢欲动了. 但是如何拥有一个自己的小程序呢? 注册流程到底是怎么样的? 首先,我们要将小程序的商家分为两类: 一.已经拥有认证过的企业公众号 ...
- 微信小程序状态码列表
function wxErrorMsg(errorcode) {let errmsg = "";switch (errorcode) {case -1:errmsg = " ...
- 微信小程序管理客服微信号
添加客服微信号.登录后台,找到如图所示即可.
- 微信小程序文档管理之下载/打开/重命名
背景: 下载 PDF 文件,并允许用户打开 问题: 文件名带有中文,导致文件名称被转码,同时文件名称也包含了其他字符 尝试解决方案: 使用 FileSystemManager.rename(),在模拟 ...
- 微信小程序:认证注册微信小程序之后,正确登录微信小程序后台管理
由于网上有太多篇关于小程序登录的坑人博文,造成视觉误导,本人已经吃亏,为了防止更多人被误导,本篇博文就来讲讲认证注册成功小程序之后,怎么正确登录到小程序的管理后台.申请微信小程序并认证的步骤参见三掌柜 ...
最新文章
- 《JavaScript DOM编程艺术》学习回顾4
- 异步同步、阻塞非阻塞、异步回调、线程队列和协程
- 向量距离计算 java_Milvus 向量搜索引擎开源了!
- 离2006年考研还有一个月
- 《如何像证券交易员一样思考和行动》_学习笔记
- matplotlib画图时间长_Python学习第86课-数据可视化之matplotlib介绍
- opencv笔记(3):图像镜像
- 全球域名商解析新增保有量15强:爱名网落榜
- 红橙Darren视频笔记 界面优化与屏幕适配(上)
- mysql group b_mysql报错之5.7版本的 group by mysql不能使用group by
- Android5.1/7.1 Selinux JNI访问新增/dev/xxx设备节点
- Ext JS4百强应用:设置textfield的悬浮提示信息 --第8强
- 并查集路径压缩_并查集简单教学
- 【转载】程序员这口饭-职业规划解决方案
- ft232r usb uart驱动_构建基于USB的高精度温度传感器电路
- 地球上20张最惊人照片!不看将后悔一辈子
- 重磅!Apache RocketMQ 深圳沙龙报名开启!
- ROG 冰刃4 在 Ubuntu 环境下安装NVIDIA驱动
- 红帽 Linux 考试 要求
- 经典案例--JS购物车
热门文章
- 【冷启动】Transform Cold-Start Users into Warm via Fused Behaviors in Large-Scale Recommendation SIGIR‘22
- lol服务器维护11月11日,LOL11月11日凌晨2点停机版本更新公告
- 计算机教程.pdf,中文电脑基础教程.pdf
- 全球及中国数字视频广告行业研究及十四五规划分析报告
- 计算机操作系统 教学目的,《操作系统》课程教学大纲学时
- 计算机等级考试的模拟主页地址如何打开,计算机等级考试一级模拟题.pdf
- 伸缩自如的时光轴实现——改进版
- fiddler----APP弱网测试
- ZOJ 2656 Travel Around Country
- 一次因内存覆盖引起的system dump问题分析,基于linux的crash工具。