小程序全局狀態管理,在頁面中獲取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

參考資料
omi


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM