基於Proxy的小程式狀態管理

摘要：小程式狀態管理。

原文：基於proxy的小程式狀態管理

目前相對比較穩健的做法是針對redux或者mobx做乙個adaptor應用到小程式中，但這樣需要自己想辦法打包引入外部庫，還要想怎麼去寫這個adaptor，總顯得有些麻煩。於是我迸發出乙個想法去寫乙個專用於小程式的狀態管理庫，它使用起來足夠簡單並且可以通過小程式自己的npm機制安裝。

目前我已經用這個開源庫開發了兩個電商小程式，在提高我開發效率的同時亦保證了程式的效能，所以接下來我想談談這背後的理念以啟發更多開發者嘗試新的解決方案。

proxy在小程式中已經得到了足夠好的支援，目前並沒有發現在任何iphone或者android上不能使用proxy的情況。而基於proxy的狀態管理其實也就是訂閱監聽的模式，一方面監聽資料的變化，另一方面將這些變化傳達給訂閱的小程式頁面。

舉乙個比較常見的例子，當乙個使用者從自己的主頁進入使用者編輯頁面，然後更改了自己的使用者名稱點選儲存後，使用者主頁和使用者編輯頁上的使用者名稱這時候都應該被更新。這背後的程式邏輯則是：更新這個行為將觸發proxy去通知狀態管理庫，然後狀態管理庫負責檢查此時還在頁面棧中的所有頁面，更新訂閱了使用者名稱這個資料的頁面，如下圖：

當乙個store被觀察以後，它的屬性就都變成了proxy例項，當這個屬性值是object或者array的時候，它內部的值也會被包裝成proxy例項，這樣無論多深層的資料變動都能被監聽到。

而在proxy的後面，store的屬性其實是被另一套資料(紫色部分)所維護，這套資料不負責監聽，它就是純資料，針對屬性的任何變動最後都會應用到這套資料上來，它的作用是維護和返回最新的資料。

實現細節：

因為小程式每個頁面的js都是向page中傳遞乙個物件，這就讓我們有機會包裝這個物件，從而實現：

進入頁面後，將頁面儲存在頁面棧中

將來自狀態管理庫的資料對映到這個頁面的data上來

頁面退出時，將頁面從頁面棧中移除

實現細節：

當資料被監聽到變化後，我們需要依次做兩件事，先是找到所有儲存在頁面棧裡的頁面，然後根據各個頁面訂閱的資料來檢查變化，如果有變化就通知這些頁面，從而讓它們去觸發setdata更新頁面。

實現細節：

有了狀態管理庫，現在我們就來實現一開始舉例的更新使用者資訊的操作，我們的檔案路徑如下：

stores/ user.js pages/ useredit/ index.js index.wxml

1. 首先我們建立乙個store儲存使用者的資訊，並且監聽它的變化：

// stores/user.js
import  from 'minii'
class userstore 
changename (name) 
}export default observe(new userstore(), 'user')

2. 接著在我們的小程式頁面訂閱store的資訊

// pages/useredit/index.js
import  from 'minii'
import userstore from '../../stores/user'
const connect = maptodata(state => (())
page(connect(
}))

3. 完成，現在可以在頁面中使用和更新資料了

// pages/useredit/index.wxml }update name to james

小程式因為有體積的限制，所以我希望在**量上也盡量做到輕量和便捷，所以目前這個狀態管理庫並沒有太多很複雜的功能，在小程式打包後所占用的體積也不到1kb，頗有點夠用就好的意思。

專案github:

hi, 我是wwayne，是一名居住在上海的獨立軟體工程師，我正在開發我的新產品 talk-to-kim, 你可以在github 或者專欄乙個人寫**找到我

基於Proxy的小程式狀態管理

基於Proxy的小程式狀態管理

微信小程式之狀態管理B

小程式狀態碼手冊

基於Proxy的小程式狀態管理

基於Proxy的小程式狀態管理

微信小程式之狀態管理B

小程式狀態碼手冊

相關推薦