从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.mzph.cn/news/791845.shtml

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

相关文章

Dubbo入门项目搭建【Dubbo3.2.9、Nacos2.3.0、SpringBoot 2.7.17、Dubbo-Admin 0.6.0】

B站学习视频 基于Dubbo3.2.9、Nacos2.3.0、SpringBoot 2.7.17、Dubbo-Admin 0.6.0、Jdk1.8 搭建的Dubbo学习Demo 一、前置安装 1-1、Nacos 安装 我本地是通过docker-compose来安装nacos的,如果需要其它方式安装可以去百度找下教程,版本是2.3.0的 docker…

新模因币MVP正在受到关注,预计将超越 SHIB 和 BONK

随着一种新的模因币TRUMP进入爆发式增长,加密市场开始对这种基于选举和权利的模因币充满了期待。并引发了人们对过去“玩笑式”模因币未来的疑问,因为当人们审视区块链与现实的意义时,发现(SHIB) 和 Bonk (BONK) 等成熟模因币这样…

常见滤波算法(PythonC版本)

简介 受限于MCU自身的ADC外设缺陷,精度和稳定性通常较差,很多场景下需要用滤波算法进行补偿。滤波的主要目的是减少噪声与干扰对数据的影响,让数据更加接近真实值。 一阶低通滤波 一阶低通滤波是一种信号处理技术,用于去除信号中…

在project模式下自定义Implementation Strategies

Implementation Settings定义了默认选项,当要定义新的implementation runs时会使用这些选项,选项的值可以在Vivado IDE中进行配置。 图1展示了“Settings”对话框中的“implementation runs”对话框。要从Vivado IDE打开此对话框,请从主菜单中…

网络通信(一)

网络编程 互联网时代,现在基本上所有的程序都是网络程序,很少有单机版的程序了。 网络编程就是如何在程序中实现两台计算机的通信。 Python语言中,提供了大量的内置模块和第三方模块用于支持各种网络访问,而且Python语言在网络…

QT实现NTP功能

一.NTP基础 1.NTP定义 NTP(Network Time Protocol,网络时间协议)是由RFC 1305定义的时间同步协议,用于分布式设备(比如电脑、手机、智能手表等)进行时间同步,避免人工校时的繁琐和由此引入的误…

Web日志/招聘网站/电商大数据项目样例【实时/离线】

Web服务器日志分析项目 业务分析 业务背景 ​ 某大型电商公司,产生原始数据日志某小时达4千五万条,一天日志量月4亿两千万条。 主机规划 (可略)日志格式: 2017-06-1900:26:36101.200.190.54 GET /sys/ashx/ConfigH…

预处理指令详解

前言 上一节我们了解了文件操作的相关内容,本节我们来了解一下预处理指令,那么废话不多说,我们正式开始今天的学习 预定义符号 在C语言中,设置了一些预定义的符号,可以供我们直接使用,预定义符号是在程序…

一场人生的风险控制,商业社会识人指南

一、资料前言 本套社会识人资料,大小679.94M,共有37个文件。 二、资料目录 识人的终极目的:一整场人生的风险控制.pdf 信任的搭建:更多的时间与维度.pdf 没有搞不定的人!角色人格与全面人格.pdf 政治不正确的正确…

程序员为什么不能一次性写好,需要一直改Bug?

程序员为什么不能一次性写好,需要一直改Bug? 我有一问: 你为什么不上清华呢,高考答满分不就行了? 程序员在软件开发过程中可能会遇到需要不断修改Bug的情况,这主要是由以下几个原因造成的: 复杂…

Linux简单介绍

Linux简单介绍 编译器VMware虚拟机Ubuntu——LinuxOS为什么使用LinuxOS? 目录结构Windows目录结构Linux操作系统home是不是家目录? Linux常用命令终端命令行提示符与权限切换命令tab 作用:自动补全上下箭头pwd命令ls命令mkdir命令touch命令rm…

智能革命:ChatGPT3.5与GPT4.0的融合,携手DALL·E 3和Midjourney开启艺术新纪元

迷图网(kk.zlrxjh.top)是一个融合了顶尖人工智能技术的多功能助手,集成了ChatGPT3.5、GPT4.0、DALLE 3和Midjourney等多种智能系统,为用户提供了丰富的体验。以下是对这些技术的概述: ChatGPT3.5是由OpenAI开发的一个自然语言处理模型&#x…

第17章 反射机制

一 反射(Reflection)的概念 1.1 反射的出现背景 Java程序中,所有的对象都有两种类型:编译时类型和运行时类型,而很多时候对象的编译时类型和运行时类型不一致。 Object obj new String(“hello”); obj.getClass() 例如:某些变…

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

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

深入理解计算机系统 家庭作业 2.75

/* 书中的公式是w位的公式(mod 就是为了截断成w位),我们现在做的是2w位中的前w位 注意书上这句话:由于模运算符,所有带有权重和的项都丢掉 对应到本题 该项除以后还是超过了2w位所以被丢弃了,因为题目说了只有2w位 这个式子除以就是我们想要的最终结果 函数signed_high_p…

前端学习<四>JavaScript基础——03-常量和变量

常量(字面量):数字和字符串 常量也称之为“字面量”,是固定值,不可改变。看见什么,它就是什么。 常量有下面这几种: 数字常量(数值常量) 字符串常量 布尔常量 自定义…

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

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

高分卫星助力台湾省花莲县地震应急救援

4月3日7时58分,在台湾省花莲县海域(北纬23.81度,东经121.74度)发生7.3级地震,震源深度12公里。接中国地震局地震预测研究所应急需求,国家航天局对地观测与数据中心(以下简称“中心”&#xff09…

C#仿OutLook的特色窗体设计

目录 1. 资源图片准备 2. 设计流程: (1)用MenuStrip控件设计菜单栏 (2)用ToolStrip控件设计工具栏 (3)用StatusStrip控件设计状态栏 (4)ImageList组件装载树节点图…

SQLyog连接数据库8.0版本解析错误问题解决方案

问题描述: 解决方案: alter userrootlocalhostidentified with mysql_native_password by 密码; 再次连接就可以了。