微信小程序全局状态管理 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的数据修改后会调用该方法，能够在此处作一些数据或者业务操做

所有就这些了。 简单就对了