微信小程序全局状态管理 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的数据修改后会调用该方法,可以在此处做一些数据或者业务操作
全部就这些了。 简单就对了
微信小程序全局状态管理 wxscv的更多相关文章
- 小程序全局状态管理,在页面中获取globalData和使用globalSetData
GitHub: https://github.com/WozHuang/mp-extend 主要目标 微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...
- 微信小程序之状态管理B
书接上文哈 咱们定义了个状态管理对象 逻辑应该是这样的 if (json.product.activity.type == "Coin1") { this.activity.coi ...
- 微信小程序之状态管理A
其实这个标题 不是很对 主要是最近小程序项目中 有这么一个状态 所有商品都共用一个商品详情页面 大概就是这样子 为了公司 保险起见,一些展示的内容已经处理 但是无伤大雅 就是这么两个按钮 左侧粉色 ...
- 微信小程序全局属性
通用全局属性:(前端也有) Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. undefined 指示未定义的值. 通用全局函数:(前端也有) decodeURI() 解码某 ...
- 微信小程序-全局配置、组件、页面跳转、用户信息等
全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...
- uni-app 微信小程序全局分享
实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置. 官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onsharea ...
- 微信小程序登录状态
我们知道,WEB服务器通过浏览器携带的cookie获取session来判断是否是同一用户(或浏览器):Restful服务通过客户端传过来唯一ID,来识别调用用户. >为什么需要维护登录态? 有自 ...
- 微信小程序——选中状态的切换
加入购物车的时候,往往会有产品相关属性的选择,比如:尺寸,规格等.像我做的项目中,就有一个门店的选择,如下图: 我们如何做到当前点击的这个高亮呢?今天就讲一下如何实现这个功能. 思路: 1.定义一个高 ...
- 微信小程序全局/页面配置
flex布局 父元素 display:flex; flex-direction: row; justify-content:space-between 补充 flex-direction属性决定主轴的 ...
随机推荐
- OpenSSL的命令行用法,以及参数大全
c:\openssl\bin>opensslOpenSSL> versionOpenSSL 1.0.2j 26 Sep 2016OpenSSL> https://wiki.opens ...
- jquery中的DOM操作集锦
1,查找节点: 1 2 var $li = $("ul li:eq(1)");//查找元素 $li.attr("title"); //查找元素的属性值 2, ...
- python的实用函数
>>> file=open('txt.txt','a') >>> print >> file,'hello,world' >>> fi ...
- Nginx多种负载均衡策略搭建
背景介绍 上篇介绍了利用Nginx反向代理实现负载均衡,本文详细讲述Nginx下的几种负载均衡策略. 轮询 轮询,顾名思义,就是轮流请求,基于上篇文章的介绍,我们将负载均衡策略聚焦于default.c ...
- 【转载】Spring Boot引起的“堆外内存泄漏”排查及经验总结
背景 为了更好地实现对项目的管理,我们将组内一个项目迁移到MDP框架(基于Spring Boot),随后我们就发现系统会频繁报出Swap区域使用量过高的异常.笔者被叫去帮忙查看原因,发现配置了4G堆内 ...
- 我所理解的Vue——学习心得体会1(Vue对象)
初学Vue,总结如下: 1.首先要区分html的dom和js的dom 2.html的dom是View的范畴,js的dom是Model的范畴. 3.vue这库就是创建了伟大的new Vue()对象,把h ...
- C++开发常见问题记录
1.提示strcpy等函数不安全,建议使用strcpy_s等函数. 处理方法:在VS集成环境的 项目->属性->C/C++->预处理器->预处理器定义 中添加 _CRT_SEC ...
- 《JavaScript 高级程序设计》读书笔记
文章目录 第三章 基本语法 第四章 变量.作用域和内存问题 第五章 应用类型 1. Array 类型 2. RegExp 类型 3. Function 类型 4. String 类型 第六章 面向对象 ...
- Go 程序是怎样跑起来的
目录 引入 编译链接概述 编译过程 词法分析 语法分析 语义分析 中间代码生成 目标代码生成与优化 链接过程 Go 程序启动 GoRoot 和 GoPath Go 命令详解 go build go i ...
- Mac安装MySQL-python报错解决
Mac安装MySQL-pyhton报错 今天在Mac上安装MySQL-python报错,搜遍网络都说什么mysql config路径问题,但是都不行. 解决方案 一开始遇到的问题是: Complete ...