微信小程式的市場在進一步的擴大，而背後的技術社群仍在摸索著最好的實踐方案。我在幫助Nike，沃爾瑪以及一些創業公司開發小程式後，依舊認為使用小程式原生框架是一個更高效，穩定的選擇，而使用原生框架唯獨缺少一個好的狀態管理庫，如果不引入狀態管理則會讓我們在模組化，專案結構以及單元測試上都有些捉襟見肘。

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

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

基於Proxy的狀態管理實現

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

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

Part1: 監聽資料變化

監聽資料變化其實就是監聽各個Store的屬性變化，實現上就是在各個Store前面加了一層Proxy，用更直觀的圖片來表示就是這樣：

當一個Store被觀察以後，它的屬性就都變成了Proxy例項，當這個屬性值是Object或者Array的時候，它內部的值也會被包裝成Proxy例項，這樣無論多深層的資料變動都能被監聽到。
而在Proxy的後面，Store的屬性其實是被另一套資料(紫色部分)所維護，這套資料不負責監聽，它就是純資料，針對屬性的任何變動最後都會應用到這套資料上來，它的作用是維護和返回最新的資料。

Part2: 頁面資料繫結

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

1. 進入頁面後，將頁面儲存在頁面棧中
2. 將來自狀態管理庫的資料對映到這個頁面的data上來
3. 頁面退出時，將頁面從頁面棧中移除

Part3： 頁面訂閱更新

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

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

使用狀態管理的例子

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

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

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

// stores/user.js
import { observe } from 'minii'

Class UserStore {
  constructor () {
     this.name = 'bob'
  }

  changeName (name) {
     this.name = name
  }
}

export default observe(new UserStore(), 'user')

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

// pages/userEdit/index.js
import { mapToData } from 'minii'
import userStore from '../../stores/user'

const connect = mapToData(state => (({
  myName: state.user.name
}))
Page(connect({
  updateNameToJames () {
    userStore. changeName('james')
  }
}))

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

// pages/userEdit/index.wxml
<text>{{ myName }}</text>
<button bindtap="updateNameToJames">update name to James</button>

最後

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