【Vue】Vuex,Vue-Router

news2024/11/17 3:31:30

❤️ Author: 老九
☕️ 个人博客:老九的CSDN博客
🙏 个人名言:不可控之事 乐观面对
😍 系列专栏:

文章目录

  • Vuex
  • vue-router

Vuex

  • 将公用的数据统一存放在store(全局数据中心)中,实现更方便的跨组件通信

  • state保存对象,使用的时候this.$store.state.num
    在这里插入图片描述

  • Getters:vuex中的Getters类似于computed计算属性,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了变化才会重新计算
    在这里插入图片描述

  • mutations:通过整个修改state里面的数据,配合commit方法,第二个参数是传值,mutations必须是同步函数,因为vuex的核心原则之一是状态变更必须是同步的,当多个组件同时修改状态时,如果允许异步mutations,就无法保证状态的一致性。
    那直接修改为什么不行,首先是可以修改的,但是如果开了严格模式,strict:true就不能够直接修改了,假如直接就修改的话,每个人都修改,就不太好维护项目了,以什么方式修改什么时候修改,我都看不到
    在这里插入图片描述

  • Actions类似于Mutations,Actions可以将异步操作和修改状态分离,Action提交的是异步操作,而非直接变更状态,Actions可以包含任何异步操作
    在这里插入图片描述
    在这里插入图片描述

  • 辅助函数
    通过mapState获取,在computed中引用
    在这里插入图片描述
    通过mapGetters获取Getters,在computed中引用
    在这里插入图片描述
    通过mapMutations和mapActions调用,在methods中写
    在这里插入图片描述

vue-router

  • 什么是SPA,SPA是单页应用,页面只有一个HTML页面,所有的内容和资源在首次加载时一次性获取,后续的页面切换和内容跟更新通过异步加载实现,不需要重新加载整个页面,而多页面应用则是多个独立的HTML页面,每次切换页面都需要重新加载整个页面。SPA的页面切换是在前端完成的,通过前端路由进行导航,动态替换视图的内容,不需要后端服务器的参与,而多页面应用开发切换是通过服务器渲染或者页面的重定向来实现的。SPA的相应页面切换都是相对多页面应用更迅速的

  • 前端路由的核心就是改变URL,但是页面不进行整体的更新

  • URL的hash也就是锚点(#),本质上是改变window.location的href属性,通过直接赋值location.hash来改变href,但是页面不发生刷新;history模式的URL地址干净,美观;

  • hash和history的区别:URL格式,history使用真实的URL路径,hash路由带有哈希标记#;实现原理,history路由通过H5的HistoryAPI(pushState,replaceState,一个是创建一个新路径,可以回退,另一个是直接替代了,不能回退),hash是通过URL的哈希部分(#)来改变路由状态,例如通过window.location.hash来获取和设置hash值。history相比于hash兼容性略差。history提供了更符合人类直觉的URL,没有hash标记

  • route对象
    在这里插入图片描述
    在这里插入图片描述

  • 路由跳转方式
    在这里插入图片描述

————————————————————————
♥♥♥码字不易,大家的支持就是我坚持下去的动力♥♥♥
版权声明:本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/605008.html

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

相关文章

从实习到秋招成为一名安全工程师,我经历了什么

前言 借朋友口述总结了安全招聘面试经历分享,希望更多的人看到这篇文,从中得到启发,找到自己心仪的工作。 基本情况 签了字节的三方,秋招终于告一段落。从八月份边实习边准备秋招到现在,经历了许多,这篇帖…

2023金三银四Java开发岗热门面试题总结

最近很多粉丝朋友私信我说:熬过了去年的寒冬却没熬过现在的内卷;打开 Boss 直拒一排已读不回,回的基本都是外包,薪资还给的不高,对技术水平要求也远超从前;感觉 Java 一个初中级岗位有上千人同时竞争&#…

都说00后已经躺平了,但是有一说一,该卷的还是卷啊。

这不,三月份春招我们公司来了个00后,工作没两年,跳槽到我们公司起薪20K,都快接近我了。 后来才知道人家是个卷王,从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天,原来这位小老弟家里条件不太好&…

Java学习路线(21)——网络通信

一、网络通信三件套 1、IP地址: 设备在网络中的地址,唯一标识 概念: Internet Protocal,简称为IP,全称“互联网协议地址”。 常见分类: IPv4(32位) 和 IPv6(128位&#…

IDEA debug断点调试认识与技巧

IDEA debug断点调试认识与技巧 文章目录 IDEA debug断点调试认识与技巧认识debug常见的操作如何开启debug模式 基本用法和快捷键1、显示执行点(Alt F10)2、步过(F8)3、步入(F7)4、强制步入(Alt…

【容器云架构】确定容器网络calico最佳网络选项

大图 了解 Calico 支持的不同网络选项,以便您可以根据需要选择最佳选项。 价值 Calico 灵活的模块化架构支持广泛的部署选项,因此您可以选择适合您特定环境和需求的最佳网络方法。这包括使用各种 CNI 和 IPAM 插件以及底层网络类型以非覆盖或覆盖模式运行…

线性回归模型一二三

文章目录 什么是线性回归线性回归的求解一元线性回归(最小二乘法)多元线性回归 衍生求解梯度下降智能搜索算法求解(PSO)简要分析 线性回归与简单神经网络联系类比推导反向传播 总结 什么是线性回归 线性回归的基本假设是&#xf…

Java JUC并发编程调优

前言 1、JUC是指有关 java.util.concurrent包以及其子包,这些包都是有关线程操作的包 2、HTTPS服务请求中,WEB服务只负责创建主线程来接收外部的HTTPS请求,如果不做任何处理,默认业务逻辑是通过主线程来做的,如果业务…

预训练大语言模型的三种微调技术总结:fine-tuning、parameter-efficient fine-tuning和prompt-tuning

预训练大模型,尤其是大语言模型已经是当前最火热的AI技术。2018年Google发布BERT模型(BERT在DataLearner官方模型卡信息:https://www.datalearner.com/ai-models/pretrained-models/BERT )的时候,大家还没有意识到本轮…

国际植物命名数据库(International Plant Names Index)

功能介绍 https://www.ipni.org/ 是国际植物命名数据库(International Plant Names Index)的官方网站。国际植物命名数据库是一个全球性的植物命名和分类资源,旨在提供植物命名信息的权威来源。以下是该网站的一些特点和功能: 植…

wmvcore.dll丢失怎么弄?解决wmvcore.dll丢失问题

wmvcore.dll是Windows Media Player中的一个重要组件,它负责处理视频和音频文件的编码和解码。如果您在使用Windows Media Player或其他媒体播放器时遇到了wmvcore.dll丢失的问题,那么您可能无法播放视频或音频文件。在这种情况下,您可以使用…

干货|接口测试必备技能-常见接口协议解析

【摘要】 服务与服务之间传递数据包,往往会因为不同的应用场景,使用不同的通讯协议进行传递。比如网站的访问,常常会使用 HTTP 协议进行传递,文件传输使用 FTP,邮件传递使用 SMTP。上述的三种类型的协议都处于网络模型…

电流环参数自整定及其原理

前言 电流环参数自整定是通过程序计算电流环PI调节器增益以实现环路响应仅受用户设定PI调节器带宽影响,而和电机本身参数无关的目的。 本文分析电流环参数自整定背后的原理,并通过仿真进行验证。 1、永磁同步电机dq轴数学模型 本文提到的电流环参数自…

【论文总结】Creating a Secure Underlay for the Internet

为互联网创建一个安全的底层 摘要: 对手可以利用跨域路由漏洞拦截通信并破坏关键互联网应用的安全性。与此同时,部署诸如边界网关安全协议(BGPsec)和下一代网络上的可扩展性、控制和隔离(SCION)等安全路由…

38 KVM管理设备-管理虚拟机USB

文章目录 38 KVM管理设备-管理虚拟机USB38.1 配置USB控制器38.1.1 概述38.1.2 注意事项38.1.3 配置方法 38.2 配置USB直通设备38.2.1 概述38.2.2 注意事项38.2.3 配置说明38.2.4 配置方法 38 KVM管理设备-管理虚拟机USB 为了方便在虚拟机内部使用USBkey设备、USB海量存储设备等…

蓝桥杯单片机基础模板一:动态数码管显示

蓝桥杯单片机有一些基础模块的写法,他是没有一定的公式模板的。 好比动态数码管扫描显示,原理就是快速地 传输段选和位选。 但因为电路上添加了74HC573芯片,导致了我们移植别处 51单片机的动态扫描代码 会出现诸多问题,比如闪烁…

期末学习总结模板

期末学习总结精选篇1 转眼间研究生的生活已经有一学期了,感觉才参加复试没多久,回头想想,这一年过的真快,因为生病,耽误了很多时间,收获太少,遗憾太多。 本学期的收获: 1、暑假里看了…

Elasticsearch文件存储

分析Elasticsearch Index文件是如何存储的? 主要是想看一下FST文件是以什么粒度创建的? 首先通过kibana找一个索引的shard,此处咱们就以logstash-2023.05.30索引为例 查看下shard分布情况 GET /_cat/shards/logstash-2023.05.30?vindex …

AtCoder Beginner Contest 303——A-E题讲解

蒟蒻来讲题,还望大家喜。若哪有问题,大家尽可提! Hello, 大家好哇!本初中生蒟蒻讲解一下AtCoder Beginner Contest 303这场比赛的A-E题! A - Similar String 原题 Problem Statement Two characters x x x and y…

Python IDLE介绍

目录 IDE(集成开发环境)是什么 Python IDLE使用方法详解 Python IDLE常用快捷键 IDE(集成开发环境)是什么 IDE 是 Integrated Development Environment 的缩写,中文称为集成开发环境,用来表示辅助程序员…