使用watch在微信小程序中实现全局状态共享

问题

在之前开发微信小程序的时候，获取用户信息、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…

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

最新评论