从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-状态对象的获取方法

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

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

相关文章

数据结构——图的应用(最小生成树,最短路径,拓扑排序,关键路径)

目录 1.最小生成树 1.概念回顾——生成树 2.最小生成树概念 2.构造最小生成树 1.MST性质 2.Prim算法 3.Kruskal 算法 4.两种算法比较 3.最短路径 1.两点间最短路径 2.某源点到其它各点最短路径 3.单源最短路径——用Dijkstra算法 4.所有顶点间的最短路径…

QML嵌套页面的实现学习记录

StackView是一个QML组件,用于管理和显示多个页面。它提供了向前和向后导航的功能,可以在堆栈中推入新页面,并在不需要时将页面弹出。 ApplicationWindow {id:rootvisible: truewidth: 340height: 480title: qsTr("Stack")// 抽屉:…

【GlobalMapper精品教程】073:像素到点(Pixels-to-Points)从无人机图像轻松生成点云

文章目录 一、工具介绍二、生成点云三、生成正射四、生成3D模型五、注意事项一、工具介绍 Global Mapper v19引入的新的像素到点工具使用摄影测量原理,从重叠图像生成高密度点云、正射影像及三维模型。它使LiDAR模块成为已经功能很强大的的必备Global Mapper扩展功能。 打开…

Linux的中间件

我们先补充点关于awk的内容 awk的用法其实很广。 $0 表示整条记录 变量: NF 一行中有多少个字段(表示字段数) NR : 代表当前记录的序号,从1开始计数。每读取一条记录,NR的值就会自动增加1。(…

编程生活day6--回文子串、蛇形填充数组、笨小猴、单词排序

回文子串 题目描述 给定一个字符串,输出所有长度至少为2的回文子串。 回文子串即从左往右输出和从右往左输出结果是一样的字符串,比如:abba,cccdeedccc都是回文字符串。 输入 一个字符串,由字母或数字组成。长度5…

【设计原则】CQRS

文章目录 概述组成与特点优缺点何时使用 CQRS 模式推荐阅读 概述 CQRS(Command Query Responsibility Segregation)是一种软件设计模式,其核心设计理念是将一个对象的数据访问(查询)和数据操作(命令&#…

显示器and拓展坞PD底层协商

简介: PD显示器或者PD拓展坞方案中,连接显示设备的Type-C端口主要运行在DRP模式,在此模式下可以兼容Source(显卡)、Sink(信号器)、DRP(手机、电脑)模式的显示设备。 Sou…

探索设计模式的魅力:揭秘B/S模式在AI大模型时代的蜕变与进化

​🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》《MYSQL应用》 💪🏻 制定明确可量化的目标,坚持默默的做事。 🚀 转载自热榜文章:探索设计模式的魅力:揭秘B/S…

ArcGIS Pro导出布局时去除在线地图水印

目录 一、背景 二、解决方法 一、背景 在ArcGIS Pro中经常会用到软件自带的在线地图,但是在导出布局时,图片右下方会自带地图的水印 二、解决方法 解决方法:添加动态文本--服务图层制作者名单,然后在布局中选定位置添加 在状…

【星计划★C语言】c语言初相识:探索编程之路

🌈个人主页:聆风吟_ 🔥系列专栏:星计划★C语言、Linux实践室 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. ⛳️第一个c语言程序二. ⛳️数据类型2.1 🔔数据单位2.2 &…

【ARM 嵌入式 C 常用数据结构系列 25 -- container_of 宏 使用介绍】

文章目录 container_of 宏container_of 宏的定义container_of 使用示例应用场景总结 container_of 宏 在Linux内核编程中,container_of宏是一个非常有用的工具,它允许开发者从指向结构体中某个成员的指针反向获得包含它的完整结构体的指针。这在实现基于…

Vol.34 Good Men Project:一个博客网站,每月90万访问量,通过付费订阅和广告变现

今天给大家分享的案例网站是:Good Men Project,这是一个专门针对男性成长的博客网站,内容包括人际关系、家庭、职业发展等话题。 它的网址是:The Good Men Project - The Conversation No One Else Is Having 流量情况 我们先看…

Linux :进程的程序替换

目录 一、什么是程序替换 1.1程序替换的原理 1.2更改为多进程版本 二、各种exe接口 2.2execlp ​编辑 2.2execv 2.3execle、execve、execvpe 一、什么是程序替换 1.1程序替换的原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往…

LongAdder 和 Striped64 基础学习

cs,表示 Cell 数组的引用;b,表示获取的 base 值,类似于 AtomicLong 中全局变量的 value 值,在没有竞争的情况下数据直接累加到 base 上,或者扩容时,也需要将数据写入到 base 上;v&am…

32-2 APP渗透 - 移动APP架构

前言 app渗透和web渗透最大的区别就是抓包不一样 一、客户端: 反编译: 静态分析的基础手段,将可执行文件转换回高级编程语言源代码的过程。可用于了解应用的内部实现细节,进行漏洞挖掘和算法分析等。调试: 排查软件错误的一种手段,用于分析应用内部原理和行为。篡改/重打…

Unity | Shader基础知识(第十一集:什么是Normal Map法线贴图)

目录 前言 一、图片是否有法线贴图的视觉区别 二、有视觉区别的原因 三、法线贴图的作用 四、信息是如何存进去的 五、自己写一个Shader用到法线贴图 六、注意事项 七、作者的话 前言 本小节会给大家解释,什么是法线贴图?为什么法线贴图会产生深…

GPT4不限制使用次数了!GPT5即将推出了!

今天登录到ChatGPT Plus账户,出现了如下提示: 已经没有了数量和时间限制的提示。 更改前:每 3 小时限制 40 次(团队计划为 100 次);更改后:可能会应用使用限制。 GPT-4放开限制 身边订阅了Ch…

C++多线程:单例模式与共享数据安全(七)

1、单例设计模式 单例设计模式,使用的频率比较高,整个项目中某个特殊的类对象只能创建一个 并且该类只对外暴露一个public方法用来获得这个对象。 单例设计模式又分懒汉式和饿汉式,同时对于懒汉式在多线程并发的情况下存在线程安全问题 饿汉…

【原创】基于分位数回归的卷积长短期结合注意力机制的神经网络(CNN-QRLSTM-Attention)回归预测的MATLAB实现

基于分位数回归的卷积长短期结合注意力机制的神经网络(CNN-QRLSTM-Attention)是一种用于时间序列数据预测的深度学习模型。该模型结合了卷积神经网络(CNN)、长短期记忆网络(LSTM)和注意力机制(A…

C语言实现通讯录(从0-1的项目)

一、前言 1、实现通讯录首先我们要了解并懂得如何通过C语言来完成有关顺序表的实现 2、需要了解的内容:如何使用顺序表结构实现增、删、改、查等操作 二、顺序表的认识和实现 1、什么是顺序表 最基础的数据结构就是数组。 顺序表则是线性表的一种,…