微信小程式全域性狀態管理 wxscv

cczw發表於2019-07-23
微信小程式

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

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

設計思路

想像model一樣引入單獨的資料模組，引入相同model的頁面資料更新是同步的。 頁面中的方法不重寫Page,而是改為處理一下Page的option。

使用示例

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的資料修改後會呼叫該方法，可以在此處做一些資料或者業務操作

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

相關文章