【uni-app教程】八、UniAPP Vuex 状态管理
八、UniAPP Vuex 状态管理
- 概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
- 应用场景
Vue多个组件之间需要共享数据或状态。
- 关键规则
- State:存储状态数据
- Getter:从状态数据派生数据,相当于 State 的计算属性
- Mutation:存储用于同步更改状态数据的方法,默认传入的参数为 state
- Action:存储用于异步更改状态数据,但不是直接更改,而是通过触发 Mutation 方法实现,默认参数为context
- Module:Vuex 模块化
- 交互关系

- 使用方式
import {mapState,mapActions
} from 'vuex'
export default {computed: {...mapState(['loginState', 'userInfo'])},methods: {...mapActions(['userLoginAction', 'userLogoutAction']),}
}
- 体验案例:模拟用户登陆逻辑实现
注意:配合使用 Storage 来实现刷新页面后状态持续保持的业务需求
(1)新建store目录,新建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({state:{userName: uni.getStorageSync('userName') ? uni.getStorageSync('userName') : '未登录用户'},mutations:{MLOGIN(state, userName){uni.setStorageSync('userName', userName)state.userName = userName},MLOGOUT(state){uni.clearStorageSync()state.userName = '退出状态用户'}},actions:{login(context, userName){context.commit('MLOGIN', userName)},logout(context){context.commit('MLOGOUT')}}
})export default store
(2)在main.js中引入store
import Vue from 'vue'
import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'// 调用 store vuex 状态管理
import store from '@/store/index.js'// if (process.env.NODE_ENV === 'development') {
// console.log('开发环境')
// } else {
// console.log('生产环境')
// }const app = new Vue({...App,store
})
app.$mount()
(3)在vue页面使用
<template><view><text>通讯录</text><view>{{userName}}</view><view><button type="default" @click="login('蜡笔小新')">登陆</button><button type="default" @click="logout">退出</button></view></view>
</template><script>import {mapState,mapActions} from 'vuex' export default {data() {return {}},onLoad(){},computed:{...mapState(['userName'])},methods: {...mapActions(['login', 'logout'])}}
</script><style></style>相关文章:
【uni-app教程】八、UniAPP Vuex 状态管理
八、UniAPP Vuex 状态管理 概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 应用场景 Vue多个组件之间需要共享数据或状态。 关键规则 State:…...
同花顺测试面经(30min)
大概三十分钟,面试官人还挺好的 1.自我介绍 2.详细问你了自我介绍中的一个实习经历 3.对我们公司有什么了解 !!(高频) 4.对测试有什么看法,为什么选测试 5.黑盒白盒分别是什么 6.对测试左移有什么看法…...
C++-简述#ifdef、#else、#endif和#ifndef的作用
回答如下: #ifdef,#else,#endif和#ifndef都是预处理指令,用于条件编译。#ifdef:这个指令用来判断一个宏是否已经被定义过,如果已经定义过,则执行后面的代码块。#else:这个指令一般与…...
VictoriaMetrics 集群部署
官网 ## 官网 https://github.com/VictoriaMetrics/VictoriaMetrics 集群角色详解 VictoriaMetrics 集群模式。主要由 vmstorage ,vminsert,vmselect 三部分组成,这三个组件每个组件都可以单独进行扩展。其中: vmstorage 负责提供数据存储服务vminsert 是数据存…...
【基于感知损失的无监督泛锐化】
PercepPan: Towards Unsupervised Pan-Sharpening Based on Perceptual Loss (PercepPan:基于感知损失的无监督泛锐化) 在基于神经网络的全色锐化文献中,作为地面实况标签的高分辨率多光谱图像通常是不可用的。为了解决这个问题…...
在vercel上用streamlit部署网站
Verce和Streamlit都是非常流行的Web应用程序部署平台。以下是从零开始在Vercel上部署Streamlit应用程序的一些基本步骤。 安装 Streamlit 在本地计算机上安装Streamlit。可以轻松地通过在命令行中运行以下命令来安装: pip install streamlit为 Streamlit 应用程序…...
华为OD机试题 - 斗地主(JavaScript)| 含思路
更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜索引擎搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:斗地主题目输入输出描述示例一输入输出示例二输…...
i.MX8MP平台开发分享(clock篇)-计算clock速度相关的内核API
专栏目录:专栏目录传送门 平台内核i.MX8MP5.15.71文章目录 clk消费者clk生产者clk_set_rateclk_round_rateclk_pll1443x_recalc_rate这一篇我们具体来看看其他驱动如何使用clock,这里以lcdif驱动为例。 IMX8MP_CLK_MEDIA_BLK_CTRL_LCDIF_PIXEL是门控时钟,名为pix,这个门控时…...
实验4 设计模式实验3
实验内容: 1. 某软件公司为新开发的智能手机控制与管理软件提供了一键备份功能,通 过该功能可以将原本存储在手机中的通信录、短信、照片、歌曲等资料一次性全 部拷贝到移动存储介质(例如MMC 卡或SD 卡)中。在实现过程中需要与多个 已有的类进行交互,例如通讯录管理类、短信…...
CNN基础
Tip:仅供自己学习记录,酌情参考 1. 前馈与反馈神经网络 神经网络有前馈神经网络和反馈神经网络,前向神经网络也就是前馈神经网络。 前馈型神经网络各神经元接收前一层的输入,并输出给下一层,没有反馈。节点分为两类…...
【UEFI基础】UEFI事件介绍
简述 在【UEFI基础】System Table和Architecture Protocols介绍Boot Service时提到有一部分与事件相关的接口,它们创建、触发、等待和关闭事件,来完成某些功能,本文将进一步介绍事件。 需要注意,因为Boot Service需要在DXE阶段才…...
Markdown 语法速查表
Markdown 速查表提供了所有 Markdown 语法元素的基本解释。如果你想了解某些语法元素的更多信息,请参阅更详细的基本语法和拓展语法。 #基本语法 这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown 应用程序都支持这些元素。 元素Markdown 语法标题…...
【C++】-- 类型转换
目录 前言 C语言中的类型转换 C强制类型转换 static_cast(static静止的) reinterpret_cast(reinterpret重新解释) const_cast(const常量) 总结 dynamic_cast(dynamic动态) …...
汇编基础语法和指令总结+案例(用32位汇编实现插入排序)
目录 前提知识 案例 c的插入排序 32位汇编代码 代码分析 效果展示 前提知识 常用指令add指令 sub指令 mul乘法指令 div除法指令 inc(自增)(即) dec(自减)(即--) cmp…...
C++多线程--线程安全的单例模式
0 引言 由于最近事情比较多,所以很久没有更新相应的专栏了。目前事情基本告一段落,重新恢复相应专栏的更新。 本文主要讲解在C++并发编程中如何实现线程安全的单例模式。本文主要由如下几部分构成 臭名昭著的double-check单例实现四种线程安全的单例模式单例模式使用中所带…...
(Android-RTC-9)PeerConnectionFactory
开篇前瞎扯。很久没发技术文章了,此文一直放着草稿箱没有完成,感觉自己在家庭和工作中找到了拖延的借口,开始慢慢变得懒惰了,那是万万不行的。恰逢2023开年ChatGPT的爆火,更让我这些普通程序员危机感瞬间飙升ÿ…...
Vector - CAPL - 定时器函数和使用
定时器在C语言中的使用我想学习过C编程的都不会陌生,它能够提供延时,完成等待一定的时间;它也可以实现多线程的操作,并行实行某些软件功能。那在CAPL中,定时器又能做哪些工作呢?又是怎么使用的呢࿱…...
【嵌入式C】常见问题
1、goto的使用场景有哪些?并讨论其局限? (1)常用来跳出死循坏; (2)在linux开发中,常用于打印错误; (3)goto在某些使用场合会破坏程序的栈逻辑&…...
[神经网络]Transfomer架构
一、概述 Transfomer架构与传统CNN和RNN最大的区别在于其仅依赖自注意力机制,而没有卷积/循环操作。其相较于RNN,不需要进行时序运算,可以更好的进行并行;相较于CNN,其一次可以关注全图而不局限于感受野尺寸。 二、模…...
C++之多态 虚函数表
多态 多态是在不同继承关系的类对象,去调用同一函数,产生了不同的行为。 需要区分一下:1、菱形虚拟继承,是在继承方式前面加上virtual; class Person {}; class Student : virtual public Person {}; class Teacher…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
