小程序全局状态管理,在页面中获取globalData和使用globalSetData
主要目标
微信小程序官方没有提供类似vuex、redux全局状态管理的解决方案,但是在一个完整的项目中各组件的数据一致性是必须要保证,因此需要开发一个能够实现小程序全局状态管理的解决方案。
设计思路
参考omix后,我觉得其中实现全局状态管理的方式与小程序本身的写法有点差异
- 小程序使用setData,omix直接使用封装的this.store修改
- 小程序官方的示例中以app.globalData作为全局属性,omix中使用自己定义的一个store对象
相对来说omix对代码有一点入侵,我更倾向于使用官方的代码实现,但是微信并没有提供全局setData的能力,只能自己实现一个了。
源码实现
globalData源码依赖于mp-extend提供的全局混入能力。
核心内容:
在App.onLaunch 时保存 app.globalData
在Page.onLoad 时使用 setData 将 app.globalData 保存到页面中,以便可以用
this.data.$globalData的方式取到当前 app.globalData 的值(页面中以{{$globalData}}的方式取值),避免手动 setData 的麻烦对所有Page对象添加方法 $globalSetData,实现全局setData的能力,自动修改所有页面中的data.$globalData
注:根据小程序官方文档中的描述,不应当对非显示的页面进行setData,因此在代码实现中对非显示的页面并不直接进行setData操作,而是暂存在一个数组中,等到页面显示时在onShow阶段setData(在回到上一层页面时显示的数据可能会有延迟,因此这个setData的时机可以根据需求决定,对于简单的项目直接对所有页面setData即可)
最终结果
页面中
this.data.$globalData可以取到 app.globalData 的值页面中
this.$globalSetData修改 app.globalData 的值并自动更新所有页面的$globalData

参考资料
omi
小程序全局状态管理,在页面中获取globalData和使用globalSetData的更多相关文章
- 微信小程序全局状态管理 wxscv
微信小程序中,数据状态不同页面中不能跨页面同步更新,也就是缺失类似vuex,mobx,redux全局的数据状态管理功能. 有些人移植了这些库,但是毕竟不是微信小程序生态的东西. Tencent也发布了 ...
- 微信小程序之状态管理A
其实这个标题 不是很对 主要是最近小程序项目中 有这么一个状态 所有商品都共用一个商品详情页面 大概就是这样子 为了公司 保险起见,一些展示的内容已经处理 但是无伤大雅 就是这么两个按钮 左侧粉色 ...
- 微信小程序之状态管理B
书接上文哈 咱们定义了个状态管理对象 逻辑应该是这样的 if (json.product.activity.type == "Coin1") { this.activity.coi ...
- 小程序:如何在wxml页面中调用JavaScript函数
早上过来遇到一个这样的bug: 在计算百分比的时候没有保留小数点后2位,从而导致一些无法整除的结果显示太长 一开始,我以为这是一个很普通的bug,既然wxml在页面{{}}内支持简单的运算,我想也应该 ...
- 微信小程序-全局配置、组件、页面跳转、用户信息等
全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...
- uni-app 微信小程序全局分享
实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置. 官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onsharea ...
- 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
- 「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-08/ 小程序如何加载的呢?生命周期!源码:https://github.com/limingios ...
- 微信小程序把玩(五)页面生命周期
原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS ...
随机推荐
- GDI Bezier 样条曲线(7)
Bezier 样条曲线 Bezier 样条曲线使用四个点来定义:两个端点(起点和终点)和两个控点(用于使其不同程度地弯曲). 绘制 Bezier 样条曲线 使用 PolyBezier 函数和 Poly ...
- 简单JavaScript小程序
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- css中的流,元素,基本尺寸
流 元素 基本尺寸 流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level e ...
- jquery ajax 全介绍
下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...
- 3.1、Ansible命令简要说明及初步使用
1.Ansible命令 1.1 Ad-hoc说明 Ansible中有一个很重要的功能就是可以执行ad-hoc命令,它表示即时.临时的意思,即表示一次性的命令.与之相对的是ansible playboo ...
- [剑指offer] 29. 顺时针打印矩阵 (for循环条件)
思路: 先定义左上和右下角点坐标,打印可分为从左到右,从上到下,从右到左,从下到上.依次判断最后一圈的四个循环条件. #include "../stdafx.h" #include ...
- 《你又怎么了我错了行了吧》【Alpha】Scrum meeting 1
第一天 日期:2019/6/14 前言: 第1次会议在9C-405召开 4个人讨论了整体代码的框架.布局.找出需要改进的地方重点讨论.明确编码的具体分工,每个人搭建好环境. 1.1 今日完成任务情况以 ...
- CNN卷机网络在自然语言处理问题上的应用
首先申明本人的英语很搓,看英文非常吃力,只能用这种笨办法来方便下次阅读.有理解错误的地方,请别喷我. 什么是卷积和什么是卷积神经网络就不讲了,自行google.从在自然语言处理的应用开始(SO, HO ...
- 【ACM-ICPC 2018 南京赛区网络预赛 I】Skr
[链接] 我是链接,点我呀:) [题意] 让你把一个字符串的所有回文子串加起来.(当做数字加起来) 求他们的和. [题解] 回文树. 从两个根节点分别遍历整棵回文树. 按照每个节点的定义. 得到每个节 ...
- 分享一些 Java 后端的个人干货
学习 Java 也有了不少时间,入 Java 后台的坑也有了一段时日.这段时间里,听过许多前辈的经验与分享,也看过许多大佬的文章和作品.找了个时间整理和总结了一下我个人到目前为止一路以来的听到看到或者 ...