微信小程序全局狀態管理 wxscv

微信小程序中，數據狀態不同頁面中不能跨頁面同步更新，也就是缺失類似vuex,mobx,redux全局的數據狀態管理功能。 有些人移植了這些庫，但是畢竟不是微信小程序生態的東西。

Tencent也發布了類似的庫，叫做 westore，基於小程序開發，非常小巧好用，非常推薦。 但是由於重寫了Page方法，而現在很多項目都有自己的框架（已經重寫了Page方法等），重構代價較大， 所以參考實現了 wxscv，喜歡的朋友直接去github查看。

設計思路

• 代碼入侵最小化，千萬不要把一個簡單功能的庫捯飭成框架那樣復雜
• 像model一樣引入單獨的數據模塊，引入相同model的頁面數據更新是同步的。 頁面中的方法不重寫Page,而是改為處理一下Page的option。
• 避開this.setData方式，直接操作this.data, 也是因為this.setData性能問題（參考westore的diff庫）
• page內引用的model數據更新的時候，同時給model一個通知回調，方便處理業務邏輯

使用示例

const scv = require("../../libs/scv/scv.js");
Page(scv.observer({                          //初始化參數
 data:{
   userinfo: scv.require("userinfo.js")    //引入model
 },
 test:function(){
   this.data.userinfo.nickName = "awen";   //設置數據
   this.update();                          //更新數據
 },
 ...
 }))

基本所有的api就在上面了。

• scv.observer 初始化處理option
• scv.require 引入數據model文件名
• this.data.xx=xx 直接修改數據
• this.update 更新數據修改，包括更新view和同步model修改到所有頁面

Model文件

model以文件的方式存在，單獨建立一個文件夾來存放model文件。默認的是 根目錄下的models文件夾。如果要修改wxscv庫文件或者models文件的存放默認位置。可以使用：wx.__scvModelBaseDir="xxxx" 來設定models文件夾的路徑，值得注意的是這是相對於scv.js文件的相對位置。

let app = getApp();
// 初始化數據
let defData = app.globalData.userInfo;
// let defData = wx.getStorageSync(key)
module.exports = {
	// 數據
	data:defData,
	// 更新回調
	onUpdate:function(){
		console.log("onUpdate", this.data);
		app.globalData.userInfo = this.data;
		// 也可以進行一些其他的數據操作。
		// wx.setStorage({}) ...
		// or wx.request({})
	}
}

返回的對象分兩部分

• data 返回的數據部分
• onUpdate model的數據修改后會調用該方法，可以在此處做一些數據或者業務操作

全部就這些了。 簡單就對了