微信小程序中,数据状态不同页面中不能跨页面同步更新,也就是缺失类似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的数据修改后会调用该方法,可以在此处做一些数据或者业务操作

全部就这些了。 简单就对了

微信小程序全局状态管理 wxscv的更多相关文章

  1. 小程序全局状态管理,在页面中获取globalData和使用globalSetData

    GitHub: https://github.com/WozHuang/mp-extend 主要目标 微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...

  2. 微信小程序之状态管理B

    书接上文哈 咱们定义了个状态管理对象 逻辑应该是这样的 if (json.product.activity.type == "Coin1") { this.activity.coi ...

  3. 微信小程序之状态管理A

    其实这个标题 不是很对 主要是最近小程序项目中 有这么一个状态 所有商品都共用一个商品详情页面  大概就是这样子  为了公司 保险起见,一些展示的内容已经处理 但是无伤大雅 就是这么两个按钮 左侧粉色 ...

  4. 微信小程序全局属性

    通用全局属性:(前端也有) Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. undefined 指示未定义的值. 通用全局函数:(前端也有) decodeURI() 解码某 ...

  5. 微信小程序-全局配置、组件、页面跳转、用户信息等

    全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...

  6. uni-app 微信小程序全局分享

    实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置. 官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onsharea ...

  7. 微信小程序登录状态

    我们知道,WEB服务器通过浏览器携带的cookie获取session来判断是否是同一用户(或浏览器):Restful服务通过客户端传过来唯一ID,来识别调用用户. >为什么需要维护登录态? 有自 ...

  8. 微信小程序——选中状态的切换

    加入购物车的时候,往往会有产品相关属性的选择,比如:尺寸,规格等.像我做的项目中,就有一个门店的选择,如下图: 我们如何做到当前点击的这个高亮呢?今天就讲一下如何实现这个功能. 思路: 1.定义一个高 ...

  9. 微信小程序全局/页面配置

    flex布局 父元素 display:flex; flex-direction: row; justify-content:space-between 补充 flex-direction属性决定主轴的 ...

随机推荐

  1. OpenSSL的命令行用法,以及参数大全

    c:\openssl\bin>opensslOpenSSL> versionOpenSSL 1.0.2j 26 Sep 2016OpenSSL> https://wiki.opens ...

  2. jquery中的DOM操作集锦

    1,查找节点: 1 2 var $li = $("ul li:eq(1)");//查找元素 $li.attr("title"); //查找元素的属性值   2, ...

  3. python的实用函数

    >>> file=open('txt.txt','a') >>> print >> file,'hello,world' >>> fi ...

  4. Nginx多种负载均衡策略搭建

    背景介绍 上篇介绍了利用Nginx反向代理实现负载均衡,本文详细讲述Nginx下的几种负载均衡策略. 轮询 轮询,顾名思义,就是轮流请求,基于上篇文章的介绍,我们将负载均衡策略聚焦于default.c ...

  5. 【转载】Spring Boot引起的“堆外内存泄漏”排查及经验总结

    背景 为了更好地实现对项目的管理,我们将组内一个项目迁移到MDP框架(基于Spring Boot),随后我们就发现系统会频繁报出Swap区域使用量过高的异常.笔者被叫去帮忙查看原因,发现配置了4G堆内 ...

  6. 我所理解的Vue——学习心得体会1(Vue对象)

    初学Vue,总结如下: 1.首先要区分html的dom和js的dom 2.html的dom是View的范畴,js的dom是Model的范畴. 3.vue这库就是创建了伟大的new Vue()对象,把h ...

  7. C++开发常见问题记录

    1.提示strcpy等函数不安全,建议使用strcpy_s等函数. 处理方法:在VS集成环境的 项目->属性->C/C++->预处理器->预处理器定义 中添加 _CRT_SEC ...

  8. 《JavaScript 高级程序设计》读书笔记

    文章目录 第三章 基本语法 第四章 变量.作用域和内存问题 第五章 应用类型 1. Array 类型 2. RegExp 类型 3. Function 类型 4. String 类型 第六章 面向对象 ...

  9. Go 程序是怎样跑起来的

    目录 引入 编译链接概述 编译过程 词法分析 语法分析 语义分析 中间代码生成 目标代码生成与优化 链接过程 Go 程序启动 GoRoot 和 GoPath Go 命令详解 go build go i ...

  10. Mac安装MySQL-python报错解决

    Mac安装MySQL-pyhton报错 今天在Mac上安装MySQL-python报错,搜遍网络都说什么mysql config路径问题,但是都不行. 解决方案 一开始遇到的问题是: Complete ...