当前位置: 首页 > 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…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...