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

VueX快速入门(适合后端,无脑入门!!!)

文章目录

    • 前言
    • State和Mutations
      • 基础
      • 简化
    • getters
    • Mutations
    • Actions(异步)
    • Module
    • 总结


前言

作为一个没啥前端基础(就是那种跳过js直接学vue的那种。。。)的后端选手。按照自己的思路总结了一下对VueX的理解。大佬勿喷qAq。

首先我们需要明确一个点,引入VueX的使用只是用来保存和操作全局变量的。类似于后端用ThreadLocal来保存当前线程的变量
相关链接Vue官网

首先我们先来了解VueX当中的五个属性:对于快速入门的选手而言,我们只需要了解前四个属性就好了,然后优先了解其中的Satae和Mutation就行
在这里插入图片描述

这里先扔一张图,就是混个眼熟,后面会再提到
在这里插入图片描述

State和Mutations

基础

State就是用来保存全局变量的值的,比如我们可以往里面定义值;
Mutations就是用来改变state当中定义的值的,我们可以往里面定义方法来改变state的值;

下面在State当中定义了一个变量count,在Mutations当中定义了一个方法increment()对state当中的变量count进行+1操作
在这里插入图片描述

这里的this.store理解为固定写法,如果我们要使用VueX的相关操作的话,就要先写上this.$store。

我们用this.$store.state.count直接获取到了state当中count属性的值,然后写了个按钮调用add()方法.

在add()方法中。我们要调用Mutations的increment方法,我们就使用this.$store的.commit(“increment”)方法,传入的increment参数就是Mutations的increment()方法

在这里插入图片描述

点击一下,数字+1
在这里插入图片描述
当然也可以传参,比如每次+2
在这里插入图片描述

简化

你可以类比后端的lambda表达式来简化操作。看不懂就算了,记住可以这么写就行。

1、我们使用计算表达式computed定义一个count()方法替代{{this.$store.state.count}}这一串
在这里插入图片描述
2、可以使用mapState进一步简化computed
在这里插入图片描述


简化的代码看不懂没关系,记住就这么写就行。QwQ)
(入门的话看完上面两个就行了,接下来两个属性都用最简化的方式了(因为可以少写代码,只要记住这种写法就行,别问为啥)


getters

getters可以理解为对state里的值做预处理,下面当中的getters就是对todos列表做了个过滤(done为true)

下面在state当中又定义了一个列表todos,现在一共两个全局变量了。count和todos,先看上面四个箭头,我们用…mapState直接把全局变量展示到了页面。

而下面两个箭头,左边在getters里我们用doneTodos方法预处理了一下state里的todos列表,只要done为true的,然后右边箭头我们用…mapgetters获取了getters预处理后的结果

在这里插入图片描述

运行结果如下
在这里插入图片描述

Mutations

不知道刚刚的简化有没有看懂,看懂的话,你就会发现state有 …mapState,getters有…mapGetters,那么mutations有没有…mapMutations呢?也是有的,因此我们再来简化。
注意我把原来的写法注释掉了,现在看看框起来的两部分,是不是很类似,也很简洁。
在这里插入图片描述

Actions(异步)

例如这张图,值得注意的一点是,我们是通过Mutations来改变state的值,因此使用Actions来commit到Mutations然后在Mutations里面修改stated的值。
在这里插入图片描述
还有一点是同步是用this.store.commit而异步是用this.store.commit而异步是用 this.store.commit而异步是用this.store.dispatch
在这里插入图片描述
在这里插入图片描述

Module

这个可参考我的另一篇文章:若依项目学习23(前后端分离版)——前端登录整体数据流程分析(Vue2)

总结

我们在回来看这张图:组件可以获取state的值(全局变量),但是想要修改值时需要通过Actions(异步,也是通过Mutations来修改state的值,要先commit到Mutations),Mutations(同步,修改state的值)。当然,可以通过getters获取预处理过的state里的值(全局变量)
在这里插入图片描述

相关文章:

VueX快速入门(适合后端,无脑入门!!!)

文章目录前言State和Mutations基础简化gettersMutationsActions(异步)Module总结前言 作为一个没啥前端基础(就是那种跳过js直接学vue的那种。。。)的后端选手。按照自己的思路总结了一下对VueX的理解。大佬勿喷qAq。 首先我们需要…...

前列腺癌论文笔记

名词解释 MRF: 磁共振指纹打印技术( MR Fingerprinting)是近几年发展起来的最新磁共振技术,以一种全新的方法对数据进行采集、后处理和实现可视化。 MRF使用一种伪随机采集方法,取代了过去为获得个体感兴趣的参数特征而使用重复系列数据的采集方法&…...

Python+Yolov5道路障碍物识别

PythonYolov5道路障碍物识别如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01;前言这篇博客针对<<PythonYolov5道路障碍物识别>>编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与…...

全新升级,EasyV 3D高德地图组件全新上线

当我们打开任意一个可视化搭建工具或者搜索数据可视化等关键词&#xff0c;我们会发现「地图」是可视化领域中非常重要的一种形式&#xff0c;对于许多可视化应用场景都具有非常重要的意义&#xff0c;那对于EasyV&#xff0c;地图又意味着什么呢&#xff1f;EasyV作为数字孪生…...

从管理到变革,优秀管理者的进阶之路

作为一位管理者&#xff0c;了解自身需求、企业需求和用户需求是非常重要的。然而&#xff0c;仅仅满足这些需求是不够的。我们还需要进行系统化的思考&#xff0c;以了解我们可以为他人提供什么价值&#xff0c;以及在企业中扮演什么样的角色。只有清晰的自我定位&#xff0c;…...

安装Anaconda3

安装Anaconda3 下载安装文件 可以去官网下载 https://repo.anaconda.com/archive/根据自己的操作系统选择合适的Anaconda版本 我选择的是Anaconda3-2021.05-Linux-x86_64.sh的版本 方法一&#xff1a;可以下载到本地然后在上传到虚拟机 方法二&#xff1a;在终端输入以下…...

HTTPS,SSL(对称加密和非对称加密详解)

上一篇博客&#xff08;HTTP详解_徐憨憨&#xff01;的博客-CSDN博客&#xff09;详细讲解了关于HTTP的知识&#xff0c;了解到HTTP协议下的数据传输是一种明文传输&#xff0c;既然是明文传输&#xff0c;可能导致在传输过程中出现一些被篡改的情况&#xff0c;此时就需要对所…...

【数据结构】还不懂算法复杂度?一文带你速解

前言:前面我们已经系统的学完C语言的相关知识&#xff0c;现在我们已经较为熟练的掌握了C语言中的各中代码语法和结构使用&#xff0c;能够使用代码来解决一些简单问题。但是对于一个程序员来说&#xff0c;仅仅会语法是远远不够的&#xff0c;从今天开始&#xff0c;我们将进入…...

案例描述:update中,MySQL inner join 和 left join的区别,小结果集驱动大结果集

场景描述 以一个场景为例&#xff1a; 单据A&#xff1a;下游子表 &#xff08;数据量级小&#xff09; 单据B&#xff1a;下游主表&#xff08;数据量级小&#xff09; 单据C&#xff1a;中游子表&#xff08;数据量级小&#xff09; 单据D&#xff1a;中游主表&#xff08;…...

CF1784D Wooden Spoon

CF1784D Wooden Spoon 题目大意 有2n2^n2n个人&#xff0c;进行nnn轮比赛。比赛的图是一棵完全二叉树。编号小的人一定能赢编号大的人&#xff0c;如果一个人满足&#xff1a; 第一次比赛被打败打败这个人的人在第二次比赛中被打败打败上一个人的人在第三次比赛中被打败…\d…...

【数据结构】栈

文章目录&#x1f63a;前言栈初始化栈顶入栈栈顶出栈栈体判空栈的数据个数获取栈顶元素栈的销毁整体代码&#x1f63c;写在最后&#x1f63a;前言 &#x1f47b;前面我们学习了链表&#xff0c;总算是跨过一个台阶了&#xff0c;本章带大家轻松一波&#xff0c;领悟一下栈的魅力…...

C++单继承和多继承

C单继承和多继承继承单继承写法继承中构造函数的写法写法构造和析构的顺序问题多继承继承 1.继承&#xff0c;主要是遗传学中的继承概念 2.继承的写法&#xff0c;继承中的权限问题 3.继承中的构造函数的写法 继承&#xff1a;子类没有新的属性&#xff0c;或者行为的产生 父类…...

金三银四,今年企业招聘如何?

又是一年求职季&#xff0c;互联网人找工作&#xff0c;和找对象一样严谨&#xff0c;不随便放手更不随便牵手。于是挑挑拣拣&#xff0c;最后的结果可能就是把自己挑剩下了。 时间已经悄然滑进3月中旬&#xff0c;多少无处安放的青春&#xff0c;还没尘埃落定&#xff1f;优秀…...

数字信号处理:滤波、频谱

一、滤波算法 应该说数字滤波器可以有效减小50Hz工频的干扰&#xff0c;完全消除是不可能的。以20ms为最小单位的整倍数周期滤波&#xff0c;可以有效减少工频的干扰。 软件中构建 IIR 陷波或者 FIR 带阻 数字滤波器&#xff0c;消除工频干扰对测量结果的影响。 1. 自适应滤波 …...

C#等高级语言运行过程

C#等高级语言运行流程&#xff1a;假设您编写了一个 C# 程序并将其保存在一个称为源代码的文件中。特定于语言的编译器将源代码编译成 MSIL&#xff08;Microsoft 中间语言&#xff09;&#xff0c;也称为 CIL&#xff08;通用中间语言&#xff09;或 IL&#xff08;中间语言&a…...

如何优雅的用POI导入Excel文件

在企业级项目开发中&#xff0c;要经常涉及excel文件和程序之间导入导出的业务要求&#xff0c;那么今天来讲一讲excel文件导入的实现。java实现对excel的操作有很多种方式&#xff0c;例如EasyExcel等&#xff0c;今天我们使用的是POI技术实现excel文件的导入。POI技术简介1.P…...

【AI 工具】文心一言内测记录

文章目录一、申请内测二、收到内测邀请三、激活内测四、开始使用1、普通对话2、生成图片3、生成代码4、写剧本5、生成小说五、问题反馈一、申请内测 到 https://yiyan.baidu.com/welcome 页面 , 点击 " 开始体验 " 按钮 , 申请试用 ; 申请时 , 需要填写相关信息 ; 主…...

Github的使用

Github Date: March 8, 2023 Sum: Github的使用 Github 了解开源相关的概念 1. 什么是开源 2. 什么是开源许可协议 开源并不意味着完全没有限制&#xff0c;为了限制使用者的使用范围和保护作者的权利&#xff0c;每个开源项目都应该遵守开源许可协议&#xff08; Open Sou…...

抽丝剥茧还原真相,记一次神奇的崩溃

作者&#xff1a;靳倡荣 本文详细回放了一个崩溃案例的分析过程。回顾了C多态和类内存布局、pc指针与芯片异常处理、内存屏障的相关知识。 一、不讲“武德”的崩溃 1.1 查看崩溃调用栈 客户反馈了一个崩溃问题&#xff0c;并提供了core dump文件&#xff0c;查看崩溃调用栈如下…...

学习笔记八:docker资源配额

docker容器控制cpudocker容器控制cpu指定docker容器可以使用的cpu份额两个容器A、B的cpu份额分别为1000和500&#xff0c;结果会怎么样&#xff1f;给容器实例分配512权重的cpu使用份额总结CPU core核心控制扩展&#xff1a;服务器架构CPU配额控制参数的混合使用cpuset-cpus和c…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

C#最佳实践:为何优先使用as或is而非强制转换

C#最佳实践&#xff1a;为何优先使用as或is而非强制转换 在 C# 的编程世界里&#xff0c;类型转换是我们经常会遇到的操作。就像在现实生活中&#xff0c;我们可能需要把不同形状的物品重新整理归类一样&#xff0c;在代码里&#xff0c;我们也常常需要将一个数据类型转换为另…...