使用watch在微信小程序中實(shí)現(xiàn)全局狀態(tài)共享

問(wèn)題

在之前開(kāi)發(fā)微信小程序的時(shí)候，獲取用戶信息、openid還有地理位置這些信息的時(shí)候，都是采用Promise的方式異步獲取，但是這樣的話在頁(yè)面和App.js中都獲取就可能造成請(qǐng)求重復(fù)的問(wèn)題。

比如為了在每個(gè)頁(yè)面都能獲取到這些共享信息，都會(huì)選擇在App.js中進(jìn)行獲取，然后在頁(yè)面級(jí)進(jìn)行獲取，這兩次獲取的時(shí)間間隔較小時(shí)就可能導(dǎo)致前一個(gè)請(qǐng)求還未獲取到數(shù)據(jù)，后一個(gè)請(qǐng)求就會(huì)再次進(jìn)行獲取，這樣就產(chǎn)生了兩次請(qǐng)求。

還有一個(gè)問(wèn)題就是書(shū)寫(xiě)麻煩(雖然也能通過(guò)async await簡(jiǎn)化)，比如

onLoad() {
 app.getUserInfo()
 .then(userInfo => {
 
 }).catch(err => { /* 錯(cuò)誤處理 */ });
 
 // 如果同時(shí)需要userInfo和openid，可能就是如下形式：
 Promise.all([app.getUserInfo(), app.getOpenid()])
 .then(res => {
 
 }).catch(err => { /* 錯(cuò)誤處理 */ });
}

正好周末的時(shí)候突然想到了vue的watch語(yǔ)法，利用一些相關(guān)的知識(shí)，就可以解決這個(gè)麻煩的問(wèn)題了。

解決思路

雙向綁定

vue的雙向綁定原理，3.0將會(huì)采用Proxy監(jiān)聽(tīng)數(shù)據(jù)變化，不過(guò)考慮到小程序這邊的Proxy兼容性我不知道，所以采用了2.0的Object.defineProperty來(lái)監(jiān)聽(tīng)數(shù)據(jù)的變化。

主要還是攔截設(shè)置的操作，在進(jìn)行賦值時(shí)，將新舊值通知至監(jiān)聽(tīng)者。

觀察者模式

在頁(yè)面級(jí)的onLoad監(jiān)聽(tīng)app.globalData各個(gè)鍵名的事件，而在app.js的onLoad中則使用Object.defineProperty重新定義app.globalData，這樣一旦app.globalData相應(yīng)的鍵值發(fā)生了變化，就會(huì)通知監(jiān)聽(tīng)的頁(yè)面該值發(fā)生了變化。

模塊化的引用

觀察者模式導(dǎo)出的是一個(gè)對(duì)象（類實(shí)例），而不是一個(gè)類，所以在導(dǎo)入的時(shí)候這個(gè)對(duì)象是共享的，就可以通過(guò)這個(gè)對(duì)象將app.js和其他頁(yè)面聯(lián)系起來(lái)。

至于模塊加載的實(shí)質(zhì)，ES6模塊加載的機(jī)制，與CommonJS模塊完全不同。感興趣的可以去看看這個(gè)。

封裝Page

小程序的Page函數(shù)本身是不支持watch，但是我們可以自定義一個(gè)函數(shù)，進(jìn)行參數(shù)合并就可以了。

在頁(yè)面onLoad時(shí)先遍歷watch屬性，對(duì)app.globalData進(jìn)行監(jiān)聽(tīng)，可以參考vue的watch用法。

頁(yè)面onUnload時(shí)就會(huì)進(jìn)行銷毀，此時(shí)也應(yīng)該取消監(jiān)聽(tīng)，這些我都封裝過(guò)了，不用手動(dòng)處理了。

有了這些思路，用不了多久，一個(gè)雛形就出來(lái)了，經(jīng)過(guò)手動(dòng)測(cè)試，感覺(jué)沒(méi)什么問(wèn)題，我就發(fā)布到npm了，大家感興趣的可以安裝體驗(yàn)一下。

安裝

npm i wx-watch -S --production

使用

// app.js
var { watchData, } = require('/miniprogram_npm/wx-watch/index.js');

App({
 onLaunch() {
 this.watchData(); /* 監(jiān)聽(tīng)this.globalData的變化，并觸發(fā)事件，其他頁(yè)面監(jiān)聽(tīng)的值必須在globalData中預(yù)先定義，否則無(wú)法監(jiān)聽(tīng) */
 },
 watchData,
 globalData: {
 userInfo: null,
 }
});

// 其他需要監(jiān)聽(tīng)globalData的頁(yè)面.js
var { getPage } = require('../../miniprogram_npm/wx-watch/index.js');
const app = getApp();

/**
 * getPage(頁(yè)面參數(shù)，app) app必傳，因?yàn)榉庋b的時(shí)候訪問(wèn)不到，就只能傳參了
*/
getPage({
 watch: {
 userInfo(userInfo, oldUserInfo) {
 console.log(`來(lái)自app.glodalData的userInfo`);
 }
 },
 // 其他參數(shù)
}, app)

github:  github.com/ma125120/wx…

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)億速云的支持。