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

轉載于:https://www.cnblogs.com/wozho/p/10443999.html

總結

以上是生活随笔為你收集整理的小程序全局状态管理，在页面中获取globalData和使用globalSetData的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。