微信小程序原生全局状态管理——wxminishareddata

一个基于原生小程序的 mini 轻量全局状态管理库,跨页面/组件数据共享渲染。

  • 全局状态 data 支持所有 Page 和 Component。
  • 类似 Vuex 的使用
  • 适合原生小程序,即使后期引入,也只需增加几行代码。
  • 目前为第一版,很粗糙,但也可以满足一般的共享状态需求

更新日志

1.0.0

[2024.5.13] : 1.0.0

导航

  • 全局状态开始
    • 安装及引入
    • 使用方式
  • 总结及建议

开始

在开始前,你可以 clone 或下载本项目,用微信开发工具打开 demo 目录来查看效果。

1.安装及引入

目前有两种引入方式:

npm

首先你需要 npm init 在项目目录下生成 package.json 后,再进行安装。

npm init
npm install wxminishareddata -S

然后在微信小程序右上角详情中勾选 使用npm模块
接着选择左上角 工具-构建 npm。
这样你就可以在项目中导入了。

直接引用

如果不太熟悉 npm 没关系,你可以将本项目中 lib/index.js 复制到你的项目中,并在app.js第一行引入:

// /store/index.js中 例如
// import Store from "wxminishareddata"; 替换成
import Store from "你存放index.js的路径";
...

2.使用方式

初始化

首先声明 Store 的实例,这里使用了单例,所以最好不要实例化多次,因为后面实例化的参数不会处理。

// /store/index.js中 例如
import Store from "wxminishareddata"; //直接引用的话 替换成import Store from "你存放index.js的路径";export default new Store({data: {appName: "实例项目",userInfo: {},},mutations: {setAppName(data, val) {data.appName = val;},setUserInfo(data, val) {data.userInfo = val;},},actions: {async getUserInfo({ storeCommit }) {setTimeout(() => {storeCommit("setUserInfo", {name: "张三",age: 18,});}, 1500);},},
});

我们现在设置了两个全局状态,一个是 appName 的字符串,一个是 userInfo 的对象。同时我们还设置了一个异步请求用来请求用户信息,mutations 里设置了两个修改 data 的方法。这里和使用 Vuex 非常相似,如果你比较熟悉 Vuex,那么你将很容易上手。

app.js 中使用

接下来我们还要在 app.js 中引入,如果同时需要调用异步方法,需要导入 storeDispatch 方法。如果要修改全局的 data,请导入 storeCommit,通过 storeCommit 方法调用 mutations 达到修改 data 的目的

// app.js 中
import "./store/index";
import { storeDispatch, storeCommit } from "wxminishareddata"; //这里是模拟一进入小程序就请求用户信息
App({onLaunch() {storeDispatch("getUserInfo");// storeCommit("setUserInfo",{//   name:"李四",//   age:20// })},
});
页面或者组件中使用

在页面或者组件中,可以 this.$setStoreToPage 方法将全局中的数据加载到页面或者组件的 data 中,其中 key 为在页面或组件 data 的 key,值为字符串,对应 store 里 data 的的 key,目前不支持使用"userInfo.name"这种形式取值。后续版本会完善。

this.$setStoreToPage({appName: "appName",userInfo: "userInfo",
});

如果要修改全局状态,请使用 this.$storeCommit(key,value)调用 store 里 mutations 中定义的方法,具体使用方法如下,这里我们重新设置了全局中 userInfo 的值,设置完会自动更新所有使用到 userInfo 的页面。

this.$storeCommit("setUserInfo", {name: "李四",age: 20,
});

调用全局的异步方法 使用 this.$storeDispatch(name,…val),name 为 actions 里的方法名,传参依次传入。

this.$storeDispatch("getUserInfo");

总结和建议

最近也是在写原生微信小程序中使用 storage 共享状态时,维护和更新不同页面需要太多的精力去做,所以花了一下午写了这个非常粗糙的方案。后续打算借鉴 Vue3 的响应式,重新实现。

大家有使用上的问题或者想法可以发邮件给我 联系我 hspprogrammer@163.com 最后欢迎来我的 github 点个小星星

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/13109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端 CSS 经典:CSS 包含块

前言:CSS 总的来说就两块,样式计算和视觉格式化模型,而包含块就是视觉格式化模型的重要内容,理解包含块的定义,对于 CSS 布局有更好的帮助。 1. 概念 什么叫包含块,指的是一个区域,某一个元素在…

华焰天下晋升质量管理三大体系和产品3C认证实力级

华焰天下,作为业界领先的新能源灶具企业,一直以来都致力于追求卓越的质量管理和产品创新。近日,华焰天下成功晋升为质量管理三大体系先进管理,并成功获得了产品3C认证,这标志着我们在质量管理和产品安全方面迈出了坚实…

ThreadLocal,一次到位

一、定义 ThreadLocal是线程私有变量&#xff0c;用于保存每个线程的私有数据。 那么什么情况下需要进行线程隔离 二、源码分析 public class ThreadLocalTest01 {ThreadLocal<Integer> t new ThreadLocal<>();public void test() {t.set(1);Integer integer…

传输层协议——TCP协议

TCP协议又叫传输控制协议&#xff0c;TCP/IP协议是计算机通信网络中目前使用最多的协议&#xff0c;同时也融入了生活的方方面面&#xff0c;不管是浏览网页使用的http/https协议、物联网设备使用的MQTT/MQTTS协议与下载文件使用的ftp协议、工业以太网中使用的Modbus TCP协议等…

JVM学习-虚拟机栈

虚拟机栈 每个线程创建时都会创建一个虚拟机栈&#xff0c;其内部保存一个个栈帧&#xff0c;对应一次次Java方法调用&#xff0c;栈是线程私有的。 生命周期: 与线程相同 作用 主管Java程序的运行&#xff0c;它保存方法的局部变量、部分结果、并参与方法的调用和返回。 …

PyTorch之list、ndarray、tensor数据类型相互转换

温故而知新&#xff0c;可以为师矣&#xff01; 一、参考资料 python中list、numpy、torch.tensor之间的相互转换 二、常用操作 list 转 numpy ndarray np.array(list) import numpy as npa_list [[j for j in range(5)] for i in range(3)] a_ndarray np.array(a_lis…

云服务器配置mysql允许被远程连接从而使用图形化界面

介绍 在云服务器上搭建和配置数据库是进行网站和应用开发的关键步骤之一。本文将介绍如何在云服务器上设置 MySQL 8 和 MySQL 5&#xff0c;以允许远程连接&#xff0c;从而让你的数据库能够被远程用户访问。这样你的本机就可以访问linux服务器上的mysql能&#xff0c;就可以使…

254 基于matlab的钢筋混凝土非线性分析

基于matlab的钢筋混凝土非线性分析&#xff0c;根据梁本构关系&#xff0c;然后进行非线性分析&#xff0c;绘制弯矩-曲率曲线。可设置梁的截面尺寸、混凝土本构&#xff0c;钢筋截面面积等相关参数&#xff0c;程序已调通&#xff0c;可直接运行。 254 钢筋混凝土非线性分析 弯…

利用管道通信(pipe)测量进程间的上下文切换(context switch)开销

利用管道通信(pipe)测量进程间的上下文切换(context switch)开销 《https://pages.cs.wisc.edu/~remzi/OSTEP/cpu-mechanisms.pdf》 Measuring the cost of a context switch is a little trickier. The lmbench benchmark does so by running two processes on a single CPU…

qmake、CMake、make和Makefile

为了跟踪C工程的全部部分&#xff0c;要求有一种机制来精确地指定&#xff1a; 涉及的输入文件&#xff0c;如源代码文件&#xff1a;.cpp&#xff0c;头文件&#xff1a;.h建立程序时所需的工具&#xff0c;如编译器&#xff1a; g.exe&#xff0c;链接器&#xff1a;ld.exe&a…

哈夫曼编码的应用

数据结构与算法课的一个简单实验&#xff0c;记录一下&#xff0c;以供参考。 文章目录 要求测试样例统计字母出现次数建立哈夫曼树对字符编码对原文进行编码译码 要求 输入一段100—200字的英文短文&#xff0c;存入一文件a中。统计短文出现的字母个数n及每个字母的出现次数…

终于搞懂Linux 设备树中的#address-cells,#size-cells 和reg 属性

目录 一、前置知识 1. 处理器平台2. reg 属性的基本格式3. reg 属性的作用 reg 用法 二、#address-cells 和 #size-cells 属性 1. 示例1 2. 示例23. 示例3 一、前置知识 要理解#address-cells和#size-cell 这两个属性&#xff0c;就要先了解 reg属性。 1. 处理器平台 下…

VS2022如何添加现有项

以 想在队列里&#xff0c;使用堆栈的.c&#xff0c;.h文件 为例 目录 1.复制堆栈的.c&#xff0c;.h文件 ​编辑 2.打开队列所在项目的文件夹 3.粘贴堆栈的.c&#xff0c;.h文件 4.在头文件和源文件添加相应的堆栈的.c&#xff0c;.h文件 1.复制堆栈的.c&#xff0c;.h文件…

QML进阶(十七) ECMAScript 语法介绍

文章目录 基本语法变量基本类型类型转换对象函数和循环打印输出内置对象来自QML的基本类型ECMAScript语言的标准是由Netscape、Sun、微软、Borland等公司基于JavaScript和JScript定义出来的脚本语言标准。可以为不同种类的浏览器环境提供核心的脚本编程能力。在QML中我们通过EC…

HCIP【VLAN综合实验】

目录 一、实验拓扑图&#xff1a; 二、实验要求&#xff1a; 三、实验思路&#xff1a; 四、实验步骤&#xff1a; 1、在交换机SW1,SW2,SW3配置VLAN和各个接口对应类型的配置 2、在路由器上面配置DHCP服务 一、实验拓扑图&#xff1a; 二、实验要求&#xff1a; 1、PC1 …

STK12 RPO模块学习(3)

一、Maintain NMC RPO Sequence Maintain Natural Motion Circumnavigation RPO序列在目标星和追踪星经历不同的力的情况下保持NMC。通常这种差异是由于阻力和太阳光压造成的。这些是主要不同力当执行接近任务的时候&#xff0c;因为重力和相对三体摄动力非常小当相对距离在10…

【Docker使用技巧】

Docker使用 命令 //docker 进入容器内部 退出 exit docker exec -it 容器ID /bin/bash //docker 查看容器日志 退出 Ctrlc docker logs [OPTIONS] 容器ID或名称 [OPTIONS] -f : 跟踪日志输出 -t : 显示时间戳 --tail :仅列出最新N条容器日志 --since&#xff1a;显示某个日…

从零开始精通RTSP之传输AAC音频流

概述 AAC&#xff0c;英文全称为Advanced Audio Coding&#xff0c;是一种高效的有损音频压缩格式&#xff0c;由MPEG-4标准定义。相比传统的MP3&#xff0c;AAC在相同比特率下能提供更好的音质&#xff0c;尤其在低比特率场景下优势明显。AAC支持多种采样率、声道数和编码工具…

MySQL远程连接错误解决:“Host is not allowed to connect to this MySQL server”详解

目录 一、异常错误二、原因三、解决方法 一、异常错误 通过远程客户端访问MySQL服务器时会遇到“Host is not allowed to connect to this MySQL server”的错误提示。 二、原因 MySQL服务器当前配置不允许来自特定主机的连接尝试。 三、解决方法 允许远程主机访问MySQL服…

link.click()时浏览器报错The file at ‘data:image/png;base64,iVBORw

代码如下&#xff1a; const dataURL canvas.toDataURL({format: "png",width: 400,height: 400, });const link document.createElement("a"); link.download new Date().getTime();link.href dataURL; document.body.appendChild(link); link.click…