主要目標
微信小程序官方沒有提供類似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