使用watch在微信小程序中实现全局状态共享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用watch在微信小程序中实现全局状态共享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2559字，纯文字阅读大概需要4分钟。
内容图文
问题
在之前开发微信小程序的时候，获取用户信息、openid还有地理位置这些信息的时候，都是采用Promise的方式异步获取，但是这样的话在页面和App.js中都获取就可能造成请求重复的问题。
比如为了在每个页面都能获取到这些共享信息，都会选择在App.js中进行获取，然后在页面级进行获取，这两次获取的时间间隔较小时就可能导致前一个请求还未获取到数据，后一个请求就会再次进行获取，这样就产生了两次请求。
还有一个问题就是书写麻烦(虽然也能通过async await简化)，比如
onLoad() {
app.getUserInfo()
.then(userInfo => {
}).catch(err => { /* 错误处理 */ });
// 如果同时需要userInfo和openid，可能就是如下形式：
Promise.all([app.getUserInfo(), app.getOpenid()])
.then(res => {
}).catch(err => { /* 错误处理 */ });
}
正好周末的时候突然想到了vue的watch语法，利用一些相关的知识，就可以解决这个麻烦的问题了。
解决思路
双向绑定
vue的双向绑定原理，3.0将会采用Proxy监听数据变化，不过考虑到小程序这边的Proxy兼容性我不知道，所以采用了2.0的Object.defineProperty来监听数据的变化。
主要还是拦截设置的操作，在进行赋值时，将新旧值通知至监听者。
观察者模式
在页面级的onLoad监听app.globalData各个键名的事件，而在app.js的onLoad中则使用Object.defineProperty重新定义app.globalData，这样一旦app.globalData相应的键值发生了变化，就会通知监听的页面该值发生了变化。
模块化的引用
观察者模式导出的是一个对象（类实例），而不是一个类，所以在导入的时候这个对象是共享的，就可以通过这个对象将app.js和其他页面联系起来。
至于模块加载的实质，ES6模块加载的机制，与CommonJS模块完全不同。感兴趣的可以去看看这个。
封装Page
小程序的Page函数本身是不支持watch，但是我们可以自定义一个函数，进行参数合并就可以了。
在页面onLoad时先遍历watch属性，对app.globalData进行监听，可以参考vue的watch用法。
页面onUnload时就会进行销毁，此时也应该取消监听，这些我都封装过了，不用手动处理了。
有了这些思路，用不了多久，一个雏形就出来了，经过手动测试，感觉没什么问题，我就发布到npm了，大家感兴趣的可以安装体验一下。
安装
npm i wx-watch -S --production
使用
// app.js
var { watchData, } = require('/miniprogram_npm/wx-watch/index.js');
App({
onLaunch() {
this.watchData(); /* 监听this.globalData的变化，并触发事件，其他页面监听的值必须在globalData中预先定义，否则无法监听 */
},
watchData,
globalData: {
userInfo: null,
}
});
// 其他需要监听globalData的页面.js
var { getPage } = require('../../miniprogram_npm/wx-watch/index.js');
const app = getApp();
/**
* getPage(页面参数，app) app必传，因为封装的时候访问不到，就只能传参了
*/
getPage({
watch: {
userInfo(userInfo, oldUserInfo) {
console.log(`来自app.glodalData的userInfo`);
}
},
// 其他参数
}, app)
github: github.com/ma125120/wx…
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
内容总结
以上是互联网集市为您收集整理的使用watch在微信小程序中实现全局状态共享全部内容，希望文章能够帮你解决使用watch在微信小程序中实现全局状态共享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。