首页 > 小程序全局状态管理,在页面中获取globalData和使用globalSetData

小程序全局状态管理,在页面中获取globalData和使用globalSetData

GitHub: https://github.com/WozHuang/mp-extend

主要目标

微信小程序官方没有提供类似vuex、redux全局状态管理的解决方案,但是在一个完整的项目中各组件的数据一致性是必须要保证,因此需要开发一个能够实现小程序全局状态管理的解决方案。

设计思路

参考omix后,我觉得其中实现全局状态管理的方式与小程序本身的写法有点差异

  1. 小程序使用setData,omix直接使用封装的this.store修改
  2. 小程序官方的示例中以app.globalData作为全局属性,omix中使用自己定义的一个store对象

相对来说omix对代码有一点入侵,我更倾向于使用官方的代码实现,但是微信并没有提供全局setData的能力,只能自己实现一个了。

源码实现

globalData源码依赖于mp-extend提供的全局混入能力。

核心内容:

  1. 在App.onLaunch 时保存 app.globalData

  2. 在Page.onLoad 时使用 setData 将 app.globalData 保存到页面中,以便可以用 this.data.$globalData 的方式取到当前 app.globalData 的值(页面中以{ {$globalData}} 的方式取值),避免手动 setData 的麻烦

  3. 对所有Page对象添加方法 $globalSetData,实现全局setData的能力,自动修改所有页面中的data.$globalData

注:根据小程序官方文档中的描述,不应当对非显示的页面进行setData,因此在代码实现中对非显示的页面并不直接进行setData操作,而是暂存在一个数组中,等到页面显示时在onShow阶段setData(在回到上一层页面时显示的数据可能会有延迟,因此这个setData的时机可以根据需求决定,对于简单的项目直接对所有页面setData即可)

最终结果

  1. 页面中 this.data.$globalData 可以取到 app.globalData 的值

  2. 页面中 this.$globalSetData 修改 app.globalData 的值并自动更新所有页面的 $globalData

1422640-20190227152616449-2033227996.gif

参考资料

omi

转载于:https://www.cnblogs.com/wozho/p/10443999.html

更多相关:

  • Window postMessage() 方法 定义和用法 postMessage() 方法用于安全地实现跨源通信。 语法 otherWindow.postMessage(message, targetOrigin, [transfer]); 参数说明otherWindow其他窗口的一个引用,比如 iframe 的 cont...

  • 定义全局变量的js: a.js 1 function GlobalConfig(){ 2 3 } 4 GlobalConfig.IPSSAddress="http://localhost/index/"; 5 (function(){ 6 7 })(); View Code 页面index.html里需要引用a.js 页面i...

  • 404错误页面是站长和用户都很不愿见到的页面,因为那意味着该网站不能访问。但404错误是没人能避免,如服务器出现问题,站内需要调整,收到攻击等,我们访问网站的时候,一旦遇到404提示,我们那时的感觉是相当差的,我们的用户体验马上就会下降,正因为如此,有一个良好的404页面设计来帮助我们的的访客,提示他们找不到相应的网页是那么的重要,越...

  • 代码精简使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点:一 是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数 量有一定好处。表格的嵌套问题很多网站如何推广的文章中称,搜索引擎一...