当前位置: 首页 > news >正文

从0到1构建uniapp应用-store状态管理

背景

在 UniApp的开发中,状态管理的目标是确保应用数据的一致性,提升用户体验,并简化开发者的工作流程。通过合理的状态管理,可以有效地处理用户交互、数据同步和界面更新等问题。

此文主要用store来管理用户的登陆信息。

重要概念

1.  状态(State):状态代表了应用中数据的变化。在 UniApp Store 中,这可能包括用户信息、插件列表、购物车内容、交易详情等。
1.  动作(Action):动作是触发状态变化的操作。例如,用户点击购买按钮、更新插件信息或提交评分等行为都会产生相应的动作。

集成步骤

创建store目录

在目录下创建index.js文件,内容如下

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({//仓库中共有属性的集合,用于存储公共状态,只存储state: {hasLogin: false,//公共属性userInfo: {} //公共属性},//vuex中mutations是专门用来修改state中属性状态的方法集合(对象)mutations: {login(state, provider) { //方法名随便起,参数state是固定写法state.hasLogin = true;state.userInfo = provider;//store 存储json数据格式的用户信息uni.setStorageSync('userInfo', provider);uni.setStorageSync('thorui_token', provider.token)if(provider.roleList != null && provider.roleList != undefined && provider.roleList.length > 0){uni.setStorageSync('roleList', provider.roleList);}},logout(state) {state.hasLogin = false;state.userInfo = {};uni.removeStorageSync('userInfo');uni.removeStorageSync('thorui_token');uni.removeStorageSync('roleList');}},actions: {},getters: {getUserInfo(state) {return state.userInfo}}
})export default store
配置main.js
import store from './store'
Vue.prototype.store = store;const app = new Vue({...App,store
})

线上体验地址, 重点就是登陆部分的使用了store实现
mincode.jpg

相关state和mutations使用具体见

vuex之state-状态对象的获取方法

相关文章:

从0到1构建uniapp应用-store状态管理

背景 在 UniApp的开发中,状态管理的目标是确保应用数据的一致性,提升用户体验,并简化开发者的工作流程。通过合理的状态管理,可以有效地处理用户交互、数据同步和界面更新等问题。 此文主要用store来管理用户的登陆信息。 重要…...

Uinx线程详解

目录 一.什么是线程? 并发(Concurrency) 并行(Parallelism) 1.1 线程的概念 1.2 线程的基本函数 1.3 线程的基本使用例子: 二.线程的属性 2.1线程属性使用例子 三.线程互斥 3.1互斥锁 3.2互斥锁常用函…...

线性代数笔记23--马尔可夫矩阵、傅里叶级数

1. 马尔可夫矩阵 例子 A [ . 1 . 001 . 3 . 2 . 099 . 3 . 7 0 . 4 ] A \begin{bmatrix} .1 & .001 & .3\\ .2 & .099 & .3\\ .7 & 0 & .4 \end{bmatrix} A ​.1.2.7​.001.0990​.3.3.4​ ​ 马尔可夫矩阵满足条件 λ 1 为特征值 \lambda1为特征…...

Elasticsearch 压测实践总结

背景 搜索、ES运维场景离不开压力测试。 1.宿主机层面变更:参数调优 & 配置调整 & 硬件升级2.集群层面变更:参数调优3.索引层面变更:mapping调整 当然还有使用层面变更,使用API调优(不属于该文章的讨论范围…...

Spirngboot JWT快速配置和使用

2、JWT 2.1、JWT介绍 JWT是JSON Web Token的缩写,即JSON Web令牌,是一种自包含令牌。 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。 JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从…...

【Java SE】继承

🥰🥰🥰来都来了,不妨点个关注叭! 👉博客主页:欢迎各位大佬!👈 文章目录 1. 继承1.1 继承是什么1.2 继承的意义1.3 继承的语法1.4 继承的方式1.5 子类中访问父类成员1.5.1 子类中访问…...

设计模式(19):策略模式

策略模式 策略模式对应与解决某一个问题的一个算法族,允许用户从该算法族中任选一个算法解决某一问题,同时可以方便的更换算法或者增加新的算法。并且由客户端决定调用哪个算法。 本质 分离算法,选择实现; 策略模式角色 上下…...

Linux 命令 top 详解

1 top命令介绍 Linux系统中,Top命令主要用于实时运行系统的监控,包括Linux内核管理的进程或者线程的资源占用情况。这个命令对所有正在运行的进程和系统负荷提供不断更新的概览信息,包括系统负载、CPU利用分布情况、内存使用、每个进程的内容…...

Android安卓开发 - 简单介绍(一)

最近呢需要重构还有维护安卓项目,所以最近会从零开始梳理开发的一些知识点以及开发的内容 前面已经写了安装的教程,idea怎么安装,还有官方的开发工具Android Studio怎么安装 2024最新版Android studio安装入门教程(非常详细&…...

AJAX —— 学习(二)

目录 一、利用 JSON 字符串 返回数据 (一)基础代码 (二)原理及实现 二、nodmon 工具 自动重启服务 (一)用途 (二)下载 (三)使用 三、IE 缓存问题 &a…...

CSC博士联培申请时间线

暂时只记得这么多了,有问题会及时修改。 #mermaid-svg-ZMjY9etaS7StCVuw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZMjY9etaS7StCVuw .error-icon{fill:#552222;}#mermaid-svg-ZMjY9etaS7StCVuw .e…...

大数据实验三-HBase编程实践

目录 一.实验内容 二.实验目的 三.实验过程截图及说明 1、安装HBase 2、配置伪分布式模式: 3、使用hbase的shell命令来操作表: 4、使用hbase提供的javaAPI来编程实现类似操作: 5、实验总结及心得体会…...

【Python】Pillow支持的图像文件格式

完全支持格式只读格式只写格式仅标识格式BLPCURPALMBUFRBMPDCXPDFGRIBDDSFITSXV ThumbnailsHDF5DIBFLCMPEGEPSFPXGIFFTEXICNSGBRICOGDIMIMTJPEGIPTC/NAAJPEG 2000MCIDASMSPMICPCXMPOPNGPCDPPMPIXARSGIPSDSPIDERQOITGASUNTIFFWALwebpWMF、EMFXBMXPM 参考文献 图像文件格式 - P…...

算法——最小生成树

Prim算法: 算法步骤: 1.选择一个起始节点作为最小生成树的起点。 2.将该起始节点加入最小生成树集合,并将其标记为已访问。 3.在所有与最小生成树集合相邻的边中,选择权重最小的边和它连接的未访问节点。 4.将该边和节点加入最小…...

OpenHarmony相机和媒体库-如何在ArkTS中调用相机拍照和录像。

介绍 此Demo展示如何在ArkTS中调用相机拍照和录像,以及如何使用媒体库接口进行媒体文件的增、删、改、查操作。 本示例用到了权限管理能力ohos.abilityAccessCtrl 相机模块能力接口ohos.multimedia.camera 图片处理接口ohos.multimedia.image 音视频相关媒体业…...

【EasyExcel】多sheet、追加列

业务-EasyExcel多sheet、追加列 背景 最近接到一个导出Excel的业务,需求就是多sheet,每个sheet导出不同结构,第一个sheet里面能够根据最后一列动态的追加列,追加多少得看运营人员传了多少需求列。原本使用的 pig4cloud 架子&…...

韩顺平 | 零基础快速学Python

环境准备 开发工具:IDLE、Pycharm、Sublime Text、Eric 、文本编辑器(记事本/editplus/notepad) Python特点:既支持面向过程OOP、也支持面向对象编程;具有解释性,不需要编程二进制代码,可以直…...

docker部署DOS游戏

下载镜像 docker pull registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docker:latestdocker-compose部署 vim docker-compose.yml version: 3 services:dosgame:container_name: dosgameimage: registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docke…...

基于单片机的无线红外报警系统

**单片机设计介绍,基于单片机的无线红外报警系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的无线红外报警系统是一种结合了单片机控制技术和无线红外传感技术的安防系统。该系统通过无线红外传感器实…...

【JAVAEE学习】探究Java中多线程的使用和重点及考点

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…...

Day81:服务攻防-开发框架安全SpringBootStruts2LaravelThinkPHPCVE复现

目录 PHP-框架安全-Thinkphp&Laravel Laravel CVE-2021-3129 RCE Thinkphp 版本3.X RCE-6.X RCE 版本6.X lang RCE J2EE-框架安全-SpringBoot&Struts2 Struct2 旧漏洞(CVE-2016-0785等) struts2 代码执行 (CVE-2020-17530)s2-061 Str…...

.kat6.l6st6r勒索病毒肆虐,这些应对策略或许能帮到你

引言: 近年来,网络安全问题日益凸显,其中勒索病毒更是成为了公众关注的焦点。其中,.kat6.l6st6r勒索病毒以其独特的传播方式和破坏力,给全球用户带来了极大的困扰。本文将深入探讨.kat6.l6st6r勒索病毒的特点&#xf…...

maya移除节点 修改节点

目录 maya移除节点 使用 Maya 用户界面: 使用脚本: maya 修改节点名字 使用 Maya 用户界面: 使用 MEL 脚本: 使用 Python 脚本: 注意事项: maya移除节点 使用 Maya 用户界面: 在“层次…...

嵌入式算法开发系列之卡尔曼滤波算法

卡尔曼滤波算法 文章目录 卡尔曼滤波算法前言一、卡尔曼滤波算法原理二、算法应用三、C语言实现总结 前言 在嵌入式系统中,传感器数据通常受到噪声、误差和不确定性的影响,因此需要一种有效的方法来估计系统的状态。卡尔曼滤波算法是一种基于概率理论的…...

简述对css工程化的理解

一、css工程化解决了哪些问题 1、宏观设计:css如何组织、拆分、设计模块结构 2、编码优化:如何更好地编写css 3、构建:如何处理css,使打包结果最优 4、可维护性:最小化后续的变更成本 二、针对问题,如何解…...

.NET 5种线程安全集合

在.NET中&#xff0c;有许多种线程安全的集合类&#xff0c;下面介绍五种我们常用的线程安全集合以及他们的基本用法。 ConcurrentBag ConcurrentBag 是一个线程安全的无序包。它适用于在多线程环境中频繁添加和移除元素的情况。 ConcurrentBag<int> concurrentBag n…...

计算机信息自查

文章目录 操作系统安装时间硬盘序列号查询上网IPMAC地址 操作系统安装时间 可以使用命令行形式&#xff0c;查询windows系统安装时间&#xff1a; wmic OS get InstallDate首先显示年份&#xff0c;然后是月份&#xff0c;然后是日期&#xff0c;然后是安装的确切时间 或者w…...

配置vite配置文件更改项目端口、使用@别名

一、配置vite配置文件更改项目端口 vite官方文档地址&#xff1a;开发服务器选项 | Vite 官方中文文档 (vitejs.dev) 使用&#xff1a; 二、使用别名 1. 安装 types/node types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API&#xff0c;并提供了对它们的类型…...

【LeetCode热题100】【链表】环形链表

题目链接&#xff1a;141. 环形链表 - 力扣&#xff08;LeetCode&#xff09; 判断一个链表有没有环可以用快慢指针的方法&#xff0c;如果没有环&#xff0c;那么最终可以让两个指针中一个为空&#xff0c;如果有环&#xff0c;那么快指针终会与慢指针相遇 class Solution {…...

SpringBoot整合ELK8.1.x实现日志中心教程

目录 背景 环境准备 环境安装 1.JDK安装 2.安装Elasticsearch 3.安装zookeeper 4.安装Kafka 5.安装logstash 6.安装file beat 解决方案场景 1.日志采集 1.1 应用日志配置 1.1.1 创建logback-spring.xml文件 1.1.2 创建LoggerFactory 1.1.3 trace日志的记录用法 …...

微企点网站建设的教学视频/太原网络推广价格

作者&#xff1a;依本多情http://blog.csdn.net/qq_36520235/article/details/82417949一、真实面试题之&#xff1a;Hashmap的结构&#xff0c;1.7和1.8有哪些区别不同点&#xff1a;&#xff08;1&#xff09;JDK1.7用的是头插法&#xff0c;而JDK1.8及之后使用的都是尾插法&…...

政务网站建设工作计划/上海网络推广

一、数据库名什么是数据库名&#xff1f;数据库名就是一个数据库的标识&#xff0c;就像人的身份证号一样。他用参数DB_NAME表示&#xff0c;如果一台机器上装了多全数据库&#xff0c;那么每一个数据库都有一个数据库名。在数据库安装或创建完成之后&#xff0c;参数DB_NAME被…...

做网站用什么开发语言/百度学术论文查重

小米6最好用的系统稳定版10.4.3 首先说一下为什么这个版本的系统我认为最好用&#xff0c;因为自己是米粉&#xff0c;也比较喜欢用最新的系统&#xff0c;去年用小米6收到了10.4.2版本的系统更新&#xff0c;体验之后感觉真的很nice&#xff0c;安卓9流畅度提升非常高&#x…...

网站建设费用摊销会计分录/计算机培训机构哪个最好

实际上配置文件application.properties还有application.yaml&#xff08;application.yml&#xff09; 我自己实际使用中&#xff0c;就是感觉用yaml能省不少&#xff0c;但是要注意换行空格符号&#xff0c;举个例子有两个属性&#xff1a;server.port 和server.name propert…...

山西住房和城乡建设厅网站/河南seo和网络推广

以下有三个问题: 1、那些内存需要回收&#xff1f; java堆中创建的对象需要回收&#xff0c;以及方法区中的类需要卸载以及常量池需要回收。 2、什么时候回收&#xff1f; JVM通过可达性算法分析&#xff0c;如果一个对象到GC roots对象之间没有链&#xff0c;则该对象就会…...

自己做网站开微店可行吗/做百度推广的网络公司广州

症状&#xff1a;无法备份。 在 drop table 时报错&#xff1a; Location: AllocPageRef.cpp:62Expression: aid idSPID: 71Process ID: 4388 &#xff08;这个是sqlserver 的进程&#xff09; 消息 3624&#xff0c;级别 20&#xff0c;状态 1&#xff0c;第 1 行系统…...