Vue Vuex的使用和原理 专门解决共享数据的问题

Vuex专门解决共享数据的问题
多组件共享时使用,如用户ID各组件需要根据ID发送请求获取数据,任意组件可以进行增删改,相当于全局变量

Vuex 工作流程

如果确定值参数可以不经过Actions 直接走

安装Vuex
vue2使用 vuex@3
vue3使用 vuex@4
npm i vuex@3
要求
> 一个两个组件 要求两个组件实现 加法运算,保存到const state = { sum: 0 }当中
配置Vuex文件
在src下面创建store/index.js(官方文档的写法)

store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
//导入VuexVue.use(Vuex)const actions = {addSum(context, value) {//context 上下文里面有commit函数 value 是组件传过来的值context.commit('AddSum', value)//获取到了数据 操作数据},//获取数据 如发起请求等
}const mutations = {AddSum(state, value) {state.sum += value//这样就完成了赋值}//操作数据
}const state = { sum: 0 }
//保存数据//暴露出去给别人使用
export default new Vuex.Store({actions, mutations, state})
然后在导入到main.js
import store from './store/index'
//如果不写文件名默认找index 如果没有报错new Vue({render: h => h(App), store,//放到vue身上
}).$mount('#app')
组件1写入数据
<button @click="add">加</button>
add(){ this.$store.dispatch('addSum',1)}
组件2读取State数据
readData() { console.log(this.$store.state.sum)}
如果没有什么业务逻辑可以不写dispatch直接 context.commit(‘AddSum’, value)
getters配置项 数据加工
类似于计算属性,如给计算器、结果*10 +10…等是一个配置项
const getters = {deal(state) { return state.sum * 10 }//让sum乘10
}
//暴露出去给别人使用
export default new Vuex.Store({actions, mutations, state, getters})
获取数据
console.log(this.$store.getters.deal)//获取加工后的数据
相关文章:
Vue Vuex的使用和原理 专门解决共享数据的问题
Vuex专门解决共享数据的问题 多组件共享时使用,如用户ID各组件需要根据ID发送请求获取数据,任意组件可以进行增删改,相当于全局变量 Vuex 工作流程 如果确定值参数可以不经过Actions 直接走 安装Vuex vue2使用 vuex3 vue3使用 vuex4 npm i…...
第九周实验记录
1、安装Nerfstudio 环境配置 首先需要创建环境python3.8,接着需要安装cuda11.7或11.3 这里安装cuda11.7 pip uninstall torch torchvision functorchpip install torch1.13.1 torchvision functorch --extra-index-url https://download.pytorch.org/whl/cu117安…...
STM32WB55开发(6)----FUS更新
STM32WB55开发.6--FUS更新 概述视频教学硬件准备存储器映射FLASH安全区设置SRAM安全区设置通过USB进行下载注意事项 概述 在 STM32WB 微控制器中,FUS(Firmware Upgrade Services)是用于固件升级的一种服务。这项服务可以让你更新设备上的无…...
centos关闭Java进程的脚本
centos关闭Java进程的脚本,有时候服务就是个jar包,关闭程序又要找到进程ID,在kill掉,麻烦,这里就写了个脚本 小白教程,一看就会,一做就成。 1.脚本如下 #!/bin/bash ps -ef | grep java | gre…...
深度学习网络模型 MobileNet系列MobileNet V1、MobileNet V2、MobileNet V3网络详解以及pytorch代码复现
深度学习网络模型 MobileNet系列MobileNet V1、MobileNet V2、MobileNet V3网络详解以及pytorch代码复现 1、DW卷积与普通卷积计算量对比DW与PW计算量普通卷积计算量计算量对比 2、MobileNet V1MobileNet V1网络结构MobileNet V1网络结构代码 3、MobileNet V2倒残差结构模块倒残…...
Spring 中 BeanFactory 和 FactoryBean 有何区别?
这也是 Spring 面试时一道经典的面试问题,今天我们来聊一聊这个话题。 其实从名字上就能看出来个一二,BeanFactory 是 Factory 而 FactoryBean 是一个 Bean,我们先来看下总结: BeanFactory 是 Spring 框架的核心接口之一…...
黑马程序员项目-黑马点评
黑马点评1 短信登录 基于Session实现登录流程 发送验证码: 用户在提交手机号后,会校验手机号是否合法,如果不合法,则要求用户重新输入手机号 如果手机号合法,后台此时生成对应的验证码,同时将验证码进行…...
ubuntu 20.04 + Anaconda + cuda-11.8 + opencv-4.8.0(cuda)
环境:一键编译opencv-4.8.0(cuda),前提是已经安装好了cuda和cudnn Anaconda安装 参考: https://blog.csdn.net/weixin_46947765/article/details/130980957 opencv4.8.0编译安装 一键编译shell脚本 VERSION4.8.0test -e ${VERSION}.zip || wget http…...
Linux 目录
目录 1. Linux 目录1.1. 目录 /usr/bin 和 /usr/local/bin 区别 1. Linux 目录 1.1. 目录 /usr/bin 和 /usr/local/bin 区别 /usr/bin 下面的都是系统预装的可执行程序, 系统升级有可能会被覆盖。/usr/local/bin 目录是给用户放置自己的可执行程序。...
Linux shell编程学习笔记21:用select in循环语句打造菜单
一、select in循环语句的功能 Linux shell脚本编程提供了select in语句,这是 Shell 独有的一种循环语句,非常适合终端(Terminal)这样的交互场景,它可以根据用户的设置显示出带编号的菜单,用户通过输入不同…...
线性回归与线性拟合的原理、推导与算法实现
关于回归和拟合,从它们的求解过程以及结果来看,两者似乎没有太大差别,事实也的确如此。从本质上说,回归属于数理统计问题,研究解释变量与响应变量之间的关系以及相关性等问题。而拟合是把平面的一系列点,用…...
【C++】set和multiset
文章目录 关联式容器键值对一、set介绍二、set的使用multiset 关联式容器 STL中的部分容器,比如:vector、list、deque、forward_list(C11)等,这些容器统称为序列式容器,因为其底层为线性序列的数据结构,里面存储的是元…...
二十、泛型(1)
本章概要 基本概念 与 C 的比较 简单泛型 一个元组类库一个堆栈类RandomList 基本概念 普通的类和方法只能使用特定的类型:基本数据类型或类类型。如果编写的代码需要应用于多种类型,这种严苛的限制对代码的束缚就会很大。 多态是一种面向对象思想的泛…...
【Unity数据交互】游戏中常用到的Json序列化
ˊˊ 👨💻个人主页:元宇宙-秩沅 👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨💻 本文由 秩沅 原创 👨💻 收录于专栏࿱…...
TCP的滑动窗口和拥塞控制
目录 滑动窗口 1.发送窗口和接收窗口 2.滑动窗口的分类 停止等待协议:发送窗口大小 1, 接收窗口大小 1 后退N帧协议(GBN):发送窗口大小 > 1,接收窗口大小 1 选择重传协议(SR…...
零信任网络:一种全新的网络安全架构
随着网络技术的不断发展,网络安全问题日益凸显。传统的网络安全策略往往基于信任和验证,但这种信任策略存在一定的局限性。为了解决这一问题,零信任网络作为一种全新的网络安全架构,逐渐受到人们的关注。本文将对零信任网络的概念…...
基于单片机的智能拐杖软件设计
欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 技术交流认准下方 CSDN 官方提供的联系方式 文章目录 概要 一、整体设计方案2.1本设计设计原理2.1.1单片机基本介绍 二、本设计方案选择三、软件设计AD原理图:原理图…...
小程序如何设置自动预约快递
小程序通过设置自动预约功能,可以实现自动将订单信息发送给快递公司,快递公司可以自动上门取件。下面具体介绍如何设置。 在小程序管理员后台->配送设置处,选择首选配送公司。为了能够支持自动预约快递,请选择正常的快递公司&…...
STM32-HAL库08-TIM的输出比较模式(输出PWM的另一种方式)
STM32-HAL库08-TIM的输出比较模式(输出PWM的另一种方式) 一、所用材料: STM32F103C6T6最小系统板 STM32CUBEMX(HAL库软件) MDK5 示波器或者逻辑分析仪 二、所学内容: 通过定时器TIM的输出比较模式得到预…...
【数据结构】深入浅出讲解计数排序【图文详解,搞懂计数排序这一篇就够了】
计数排序 前言一、计数排序算法核心思路映射 概念补充绝对映射相对映射 二、计数排序算法核心实现步骤三、码源详解四、效率分析(1)时间复杂度 — O(Max(N,range))(2)空间…...
单片机编程规范1 ---阮丁远 20260509
单片机编程规范1 ---阮丁远 20260509 :1.只用静态数组is被占用的标志位来 分配内存,不用malloc2.读写带下标的参数前先验证下标大小范围是否对,比如有的下标只能1开始,因为0的话里面 0-1 就变为负数了3.可以建立 参数 范围 监控…...
每月不到30元,在天翼云上搭建SK5多IP服务器的踩坑实录与成本优化指南
天翼云低成本搭建多IP代理服务器的实战指南与避坑手册 对于需要多IP操作的技术爱好者来说,如何在预算有限的情况下搭建稳定可靠的代理服务器一直是个难题。天翼云凭借其极具竞争力的价格和灵活的计费方式,成为许多精打细算用户的首选平台。本文将从一个实…...
当流程图XML“损坏”时:手把手教你用Activiti API解析与修复BPMN文件
当BPMN文件遭遇“数据灾难”:Activiti深度修复实战指南 凌晨三点,服务器警报突然响起——核心业务流程引擎拒绝加载最新上传的BPMN文件。这不是简单的格式错误,而是一个从老旧系统迁移来的、经过多次手工编辑的流程定义文件。作为技术负责人&…...
服务器电源、电机驱动、UPS:IRLR3636TRPBF的60V功率MOSFET应用版图
IRLR3636TRPBF:DPAK封装60V/50A N沟道功率MOSFET的大电流开关应用解析在大功率开关电源、不间断电源以及直流电机驱动等领域,功率MOSFET的导通损耗直接影响系统的温升和能效等级。当设计需要在60V电压平台上处理50A级别的大电流时,导通电阻和…...
【Perplexity阅读推荐查询实战指南】:20年AI工具专家亲授5大精准筛选技巧,错过再等一年
更多请点击: https://kaifayun.com 第一章:Perplexity阅读推荐查询的核心价值与适用场景 Perplexity 作为一款基于大语言模型的实时问答与研究工具,其“阅读推荐查询”能力并非简单的内容聚合,而是融合语义理解、来源可信度评估…...
别再让用户错过消息!UniApp应用通知权限引导的最佳实践与UniPush 2.0优化
UniApp应用通知权限引导的艺术与UniPush 2.0实战策略 当用户的手指在屏幕上轻轻滑动,决定是否授予你的应用通知权限时,这场无声的对话将直接影响后续的用户留存与活跃度。数据显示,超过60%的用户在首次拒绝通知权限后,永远不会主动…...
北光恒电:安捷伦6812B/6813B电源不开机、输出不正常故障排查
安捷伦6812B/6813B电源作为高精度交流电源/功率分析仪,广泛应用于电源测试、UPS测试、航空电子ATE等场景,凭借稳定性能成为实验室和生产线上的核心设备。长期使用或操作不当,不开机、输出不正常等故障频发,影响测试效率。常见故障…...
Android 相机有线连接开发复盘:PTP/MTP 协议适配与稳定性实践
一、项目背景在做一个相机互联类 App 的过程中,我们需要在 Android 设备上通过 USB 有线方式 连接相机,实现:遥控拍摄实时获取照片稳定地进行文件同步最初评估时以为只要调用系统 API 就能跑起来,但实际开发中发现,标…...
STM32开发库选型指南:标准库、HAL库与LL库的深度对比与实战应用
1. 项目概述:从寄存器到库,STM32开发的演进之路十年前,当我第一次接触STM32时,面对的是密密麻麻的寄存器手册和几百页的参考手册,一个简单的GPIO点灯操作都需要配置好几个寄存器。那时候,标准库(…...
如何快速使用TestDisk PhotoRec:数据恢复的完整终极指南
如何快速使用TestDisk & PhotoRec:数据恢复的完整终极指南 【免费下载链接】testdisk TestDisk & PhotoRec 项目地址: https://gitcode.com/gh_mirrors/te/testdisk 当您不小心删除了重要的工作文档,或者硬盘分区突然消失不见,…...
