微信小程序全局狀態管理 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的數據修改後會調用該方法，能夠在此處作一些數據或者業務操做

所有就這些了。 簡單就對了