vue3-应用规模化-路由和状态
客户端 vs. 服务端路由
服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时,浏览器会从服务端获得全新的 HTML,然后重新加载整个页面。
然而,在单页面应用中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验,尤其是在更偏向“应用”的场景下,因为这类场景下用户通常会在很长的一段时间中做出多次交互。
在这类单页应用中,“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。
官方路由
Vue Router (https://router.vuejs.org/zh/)
状态管理
什么是状态管理?
理论上来说,每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例:
<script setup>
import { ref } from 'vue'// 状态
const count = ref(0)// 动作
function increment() {count.value++
}
</script><!-- 视图 -->
<template>{{ count }}</template>
它是一个独立的单元,由以下几个部分组成:
状态:驱动整个应用的数据源;
视图:对状态的一种声明式映射;
交互:状态根据用户在视图中的输入而作出相应变更的可能方式。
下面是“单向数据流”这一概念的简单图示:
然而,当我们有多个组件共享一个共同的状态时,就没有这么简单了:
-
多个视图可能都依赖于同一份状态。
-
来自不同视图的交互也可能需要更改同一份状态。
对于情景 1,一个可行的办法是将共享状态“提升”到共同的祖先组件上去,再通过 props 传递下来。然而在深层次的组件树结构中这么做的话,很快就会使得代码变得繁琐冗长。这会导致另一个问题:Prop 逐级透传问题。
对于情景 2,我们经常发现自己会直接通过模板引用获取父/子实例,或者通过触发的事件尝试改变和同步多个状态的副本。但这些模式的健壮性都不甚理想,很容易就会导致代码难以维护。
一个更简单直接的解决方案是抽取出组件间的共享状态,放在一个全局单例中来管理。这样我们的组件树就变成了一个大的“视图”,而任何位置上的组件都可以访问其中的状态或触发动作。
用响应式 API 做简单状态管理
如果你有一部分状态需要在多个组件实例间共享,你可以使用 reactive() 来创建一个响应式对象,并将它导入到多个组件中:
// store.js
import { reactive } from 'vue'export const store = reactive({count: 0
})
<!-- ComponentA.vue -->
<script setup>
import { store } from './store.js'
</script><template>From A: {{ store.count }}</template>
<!-- ComponentB.vue -->
<script setup>
import { store } from './store.js'
</script><template>From B: {{ store.count }}</template>
现在每当 store 对象被更改时,<ComponentA> 与 <ComponentB> 都会自动更新它们的视图。现在我们有了单一的数据源。
然而,这也意味着任意一个导入了 store 的组件都可以随意修改它的状态:
<template><button @click="store.count++">From B: {{ store.count }}</button>
</template>
虽然这在简单的情况下是可行的,但从长远来看,可以被任何组件任意改变的全局状态是不太容易维护的。为了确保改变状态的逻辑像状态本身一样集中,建议在 store 上定义方法,方法的名称应该要能表达出行动的意图:
// store.js
import { reactive } from 'vue'export const store = reactive({count: 0,increment() {this.count++}
})
<template><button @click="store.increment()">From B: {{ store.count }}</button>
</template>
请注意这里点击的处理函数使用了 store.increment(),带上了圆括号作为内联表达式调用,因为它并不是组件的方法,并且必须要以正确的 this 上下文来调用。
除了我们这里用到的单个响应式对象作为一个 store 之外,你还可以使用其他响应式 API 例如 ref() 或是 computed(),或是甚至通过一个组合式函数来返回一个全局状态:
import { ref } from 'vue'// 全局状态,创建在模块作用域下
const globalCount = ref(1)export function useCount() {// 局部状态,每个组件都会创建const localCount = ref(1)return {globalCount,localCount}
}
事实上,Vue 的响应性系统与组件层是解耦的,这使得它非常灵活。
Pinia (推荐)
虽然我们的手动状态管理解决方案在简单的场景中已经足够了,但是在大规模的生产应用中还有很多其他事项需要考虑:
-
更强的团队协作约定
-
与 Vue DevTools 集成,包括时间轴、组件内部审查和时间旅行调试
-
模块热更新 (HMR)
-
服务端渲染支持
Pinia(https://pinia.vuejs.org/zh/) 就是一个实现了上述需求的状态管理库,由 Vue 核心团队维护,对 Vue 2 和 Vue 3 都可用。
现有用户可能对 Vuex 更熟悉,它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好,因此 Vuex 现在处于维护模式。它仍然可以工作,但不再接受新的功能。对于新的应用,建议使用 Pinia。
事实上,Pinia 最初正是为了探索 Vuex 的下一个版本而开发的,因此整合了核心团队关于 Vuex 5 的许多想法。最终,我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容,因此决定将其作为新的官方推荐。
相比于 Vuex,Pinia 提供了更简洁直接的 API,并提供了组合式风格的 API,最重要的是,在使用 TypeScript 时它提供了更完善的类型推导。
相关文章:
vue3-应用规模化-路由和状态
客户端 vs. 服务端路由 服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时,浏览器会从服务端获得全新的 HTML,然后重新加载整个页面。 然而,在单页面应用中&…...
网络安全检查表
《网络攻击检查表》 1.应用安全漏洞 2.弱口令,默认口令 3.服务器互联网暴露 4.操作系统,中间件安全漏洞 5.研发服务器,邮件服务器等安全检查...
SSM框架,Maven的学习(下)
依赖传递和依赖冲突 依赖传递指的是当一个模块或库 A 依赖于另一个模块或库 B,而 B 又依赖于模块或库 C,那么 A 会间接依赖于 C。这种依赖传递结构可以形成一个依赖树。当我们引入一个库或框架时,构建工具(如 Maven、Gradle&…...
Vivado开发FPGA使用流程、教程 verilog(建立工程、编译文件到最终烧录的全流程)
目录 一、概述 二、工程创建 三、添加设计文件并编译 四、线上仿真 五、布局布线 六、生成比特流文件 七、烧录 一、概述 vivado开发FPGA流程分为创建工程、添加设计文件、编译、线上仿真、布局布线(添加约束文件)、生成比特流文件、烧录等步骤&a…...
C语言之动态内存管理
目录 1. 为什么要有动态内存分配2. malloc和freemallocfree 3. calloc和realloccallocrealloc 4. 常见的动态内存的错误对NULL直接的解引用操作对动态开辟空间的越界访问对非动态开辟内存使用free释放使用free释放一块动态开辟内存的一部分对同一块动态内存多次释放动态开辟内存…...
【AIGC风格prompt深度指南】掌握绘画风格关键词,实现艺术模仿的革新实践
[小提琴家]ASCII风格,点,爆炸,光,射线,计算机代码 由冰和水制成的和平标志]非常详细,寒冷,冰冻,大气,照片逼真,流动,16K 胡迪尼模拟火和水&#x…...
Qt安装配置教程windows版(包括:Qt5.8.0版本,Qt5.12,Qt5.14版本下载安装教程)(亲测可行)
目录 Qt5.8.0版本安装教程Qt5.8.0版本下载安装 Qt5.12.2版本安装教程下载安装 Qt 5.14.2安装教程下载安装和创建项目 参考视频 QT为嵌入式系统提供了大量的库和可重用组件。 WPS Office,咪咕音乐,Linux桌面环境等都是QT开发的。 Qt5.8.0版本安装教程 Q…...
SpringCloud-Ribbon实现负载均衡
在微服务架构中,负载均衡是一项关键的技术,它可以确保各个服务节点间的负载分布均匀,提高整个系统的稳定性和性能。Spring Cloud 中的 Ribbon 就是一种负载均衡的解决方案,本文将深入探讨 Ribbon 的原理和在微服务中的应用。 一、…...
Qt网络编程-TCP与UDP
网络基础 TCP与UDP基础 关于TCP与UDP的基础这里就不过多介绍了,具体可以查看对应百度百科介绍: TCP(传输控制协议)_百度百科 (baidu.com) UDP_百度百科 (baidu.com) 需要知道这两者的区别: 可靠性: TC…...
Promise 常见题目
微信搜索“好朋友乐平”关注公众号。 1. Promise 对象池 请你编写一个异步函数 promisePool ,它接收一个异步函数数组 functions 和 池限制 n。它应该返回一个 promise 对象,当所有输入函数都执行完毕后,promise 对象就执行完毕。 池限制 定…...
五大架构风格之五:仓库架构风格
仓库架构风格: 仓库风格架构(Repository Architecture Style)是一种软件架构模式,它主要用于处理系统中的持久化数据存储和检索。在这一风格中,仓库(Repository)作为应用程序与数据库或其他持久…...
探索设计模式的魅力:外观模式简化术-隐藏复杂性,提供简洁接口的设计秘密
设计模式专栏:http://t.csdnimg.cn/U54zu 目录 引言:探索简化之路 一、起源和演变 二、场景案例分析 2.1 不用模式实现:用一坨坨代码实现 2.2 问题 2.3 外观模式重构代码 定义 界面 接口 利用外观模式解决问题步骤 外观模式结构和说明 重构…...
java之Maven
1. maven Maven是管理和构建java项目的工具 项目依赖资源(jar包)的管理,避免版本冲突统一项目结构项目构建,标准跨平台(Linux,window,MacOS)的自动化项目管理 2.maven依赖仓库 2.maven安装 maven安装视频教程 3. IDEA集成Maven 4. maven的依赖范围 5. maven生命…...
Elasticsearch(四)
是这样的前面的几篇笔记,感觉对我没有形成知识体系,感觉乱糟糟的,只是大概的了解了一些基础知识,仅此而已,而且对于这技术栈的学习也是为了在后面的java开发使用,但是这里的API学的感觉有点乱!然…...
蓝桥杯-X图形
问题描述 给定一个字母矩阵。一个 X 图形由中心点和由中心点向四个 45度斜线方向引出的直线段组成,四条线段的长度相同,而且四条线段上的字母和中心点的字母相同。 一个 X 图形可以使用三个整数 r,c,L 来描述,其中 r,c 表示中心点位于第 r 行…...
2. Maven 继承与聚合
目录 2. 2.1 继承 2.2继承关系 2.2.1 思路分析 2.2.2 实现 2.1.2 版本锁定 2.1.2.1 场景 2.1.2.2 介绍 2.1.2.3 实现 2.1.2.4 属性配置 2.2 聚合 2.2.1 介绍 2.2.2 实现 2.3 继承与聚合对比 maven1:分模块设计开发 2. 在项目分模块开发之后啊&#x…...
如何把手机平板变为电脑的屏幕
文章目录 安装软件运行效果结尾 本文首发地址 https://h89.cn/archives/181.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 闲置的手机平板、触屏音箱等,均可作为电脑的扩展屏,为电脑增加一块显示屏,本文介绍如何使用免费的软件s…...
Amazon Dynamo学习总结
目录 一、Amazon Dynamo的问世 二、Amazon Dynamo主要技术概要 三、数据划分算法 四、数据复制 五、版本控制 六、故障处理 七、成员和故障检测 一、Amazon Dynamo的问世 Amazon Dynamo是由亚马逊在2007年开发的一种高度可扩展和分布式的键值存储系统,旨在解…...
appium抓包总结
appium抓包总结 背景:有些app通过抓包工具charles等抓不到接口数据,应为这一类抓包工具只能抓到应用层的数据包,而某些app的接口是走的传输层协议,所以此时只能通过AppIUM工具来进行抓包。 1、Appium 是什么? Appium…...
arcgis各种版本下载
arcgic 下载!!! ArcGIS是一款地理信息系统软件,由美国Esri公司开发。它提供了一系列完整的GIS功能,包括地图制作、空间数据管理、空间分析、空间信息整合、发布与共享等。ArcGIS是一个可扩展的GIS平台,提供…...
第五篇:MySQL常见数据类型
MySQL中的数据类型有很多,主要分为三类:数值类型、字符串类型、日期时间类型 三个表格都在此网盘中,需要者可移步自取,如果觉得有帮助希望点个赞~ MySQL常见数据类型表 数值类型 (注:decimal类型举例,如1…...
Oracle用BETWEEN AND查某年的数据可能会丢失条数
随便找一张有日期(字段类型为DATE)的表即可测试。 假设存在这样一张表HOLIDAY,里面存储的是某些国家(表字段为COUNTRY_CODE)某些年的法定假日日期(表字段为HOLIDAY_DATE)。 我想查中国在2023年和2024年的法定假日日期。 BETWEEN AND 首先想…...
Nuscenes数据集点云数据如何转换到图像上
零、概要 注意:该文章是手写ai自动驾驶,Nuscenes数据集的笔记。 首先,学习需要使用到 nuScenes 数据集。python 工具需要使用到 nuscenes-devkit、pyquaternion from nuscenes.nuscenes import NuScenes from pyquaternion import Quatern…...
【C语言期末】商品管理系统
本文资源:https://download.csdn.net/download/weixin_47040861/88820155 1.题目要求 商品管理系统 商品信息包括:包括编号、类别、名称、价格、折扣比例、生产时间 、存货数量等要求:1、信息首先保存在文件中,然后打开文件进行…...
单片机学习笔记---串口通信(2)
目录 串口内部结构 串口相关寄存器 串口控制寄存器SCON SM0和SM1 SM2 REN TB8和RB8 TI和RI 电源控制寄存器PCON SMOD 串口工作方式 方式0 方式0输出: 方式0输入 方式1 方式1输出。 方式1输入 方式2和方式3 方式2和方式3输出: 方式2和…...
【Java】乐观锁有哪些常见实现方式?
Java中的乐观锁主要有两种常见的实现方式: CAS(Compare and Swap):这是实现乐观锁的核心算法。CAS操作包含三个参数:内存地址V、旧的预期值A和要修改的新值B。执行CAS操作时,会先比较内存地址V中的值是否等…...
Javaweb之SpringBootWeb案例之登录校验功能的详细解析
2. 登录校验 2.1 问题分析 我们已经完成了基础登录功能的开发与测试,在我们登录成功后就可以进入到后台管理系统中进行数据的操作。 但是当我们在浏览器中新的页面上输入地址:http://localhost:9528/#/system/dept,发现没有登录仍然可以进…...
CSS之盒模型
盒模型概念 浏览器盒模型(Box Model)是CSS中的基本概念,它描述了元素在布局过程中如何占据空间。盒模型由内容(content)、内边距(padding)、边框(border)、和外边距&…...
博客系统-SpringBoot版本
相比于之前使用Servlet来完成的博客系统,SpringBoot版本的博客系统功能更完善,使用到的技术更接近企业级,快来看看吧~ 目录 1.项目介绍 2.数据库准备 3.实体化类 4.返回格式 5.登录和注册功能 6.登出(注销)功能…...
详细分析Redis中数值乱码的根本原因以及解决方式
目录 前言1. 问题所示2. 原理分析3. 拓展 前言 对于这方面的相关知识推荐阅读: Redis框架从入门到学精(全)Java关于RedisTemplate的使用分析 附代码java框架 零基础从入门到精通的学习路线 附开源项目面经等(超全) …...
网络专栏目录
大家好我是苏麟 , 这是网络专栏目录 . 图解网络 资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) 图解网络目录 基础篇 基础篇 TCP/IP网络模型有几层? : TCP/IP网络模型 键入网址到页面显示,期间发生了什么? : 键入网址到页面显示,期间发生了什么 现阶…...
【Python网络编程之Ping命令的实现】
🚀 作者 :“码上有前” 🚀 文章简介 :Python开发技术 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 Python网络编程之Ping命令的实现 代码见资源,效果图如下一、实验要求二、协议原理2…...
OpenHarmony轻量级驱动开发
OpenHarmony轻量级驱动开发 思维导图: https://download.csdn.net/download/lanlingxueyu/88817155 GPlO(General-purpose input/output)即通用型输入输出 描述 GPlO(General-purpose input/output)即通用型输入输出。通俗地说,GPlO口就是一些引脚可以通过它们输出高低…...
C语言如何输⼊字符数组?
一、问题 在程序中,scanf()函数可以输⼊任意类型的数据,gets()函数只能输⼊字符串等,但是如何更好地输⼊字符数组呢? 二、解答 我们知道如何使⽤格式输⼊函数 scanf(),那么可以使⽤%c 格式符逐个输⼊字符。这样输⼊有…...
人脸追踪案例及机器学习认识
1.人脸追踪机器人初制 用程序控制舵机运动的方法与机械臂项目完全相同。 由于摄像头的安装方式为上下倒转安装,我们在编写程序读取图像时需使用 flip 函数将 图像上下翻转。 现在,只需要使用哈尔特征检测得到人脸在图像中的位置,再指示舵机运…...
鸿蒙开发理论之页面和自定义组件生命周期
1、自定义组件和页面的关系 页面:即应用的UI页面。可以由一个或者多个自定义组件组成,Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个Entry。只有被Entry装饰的组件才可以调用页面的生命周期。自…...
docker-compose部署gitlab和jenkins
通过docker-compose部署gitlab和jenkins,方便后续工作 注意: gitlab占用资源较多,最好系统内存在8G以上,CPU4核心以上,否则gitlab有可能报错无法启动。docker版本用最新版本,低版本的docker可能会导致doc…...
Pytorch 复习总结 1
Pytorch 复习总结,仅供笔者使用,参考教材: 《动手学深度学习》 本文主要内容为:Pytorch 张量的常见运算、线性代数、高等数学、概率论。 Pytorch 张量的常见运算、线性代数、高等数学、概率论 部分 见 Pytorch 复习总结 1&…...
谷歌免费开放模糊测试框架OSS-Fuzz(物联网、车联网、供应链安全、C/C++)
目录 模糊测试的智能化和自动化 模糊测试不能代替安全设计原则 AI驱动的漏洞修补...
华为配置内部人员接入WLAN网络示例(802.1X认证)
配置内部人员接入WLAN网络示例(802.1X认证) 组网图形 图1 配置802.1X认证组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 用户接入WLAN网络,使用802.1X客户端进行认证,输入正确的用户名和密…...
EXCEL中如何调出“数据分析”的菜单
今天发现,原来WPS还是和EXCEL比,还是少了“数据分析”这个日常基本做统计的菜单,只好用EXCEL了,但奇怪发现我的EXCEL中没发现这个菜单,然后查了下,才发现,要用如下的方法打开: 1&…...
基于Qt的人脸识别项目(功能:颜值检测,口罩检测,表情检测,性别检测,年龄预测等)
完整代码链接在文章末尾 效果展示 代码讲解(待更新) qt图片文件上传 #include <QtWidgets> #include <QFileDialog>...
书生谱语-大语言模型测试demo
课程内容简介 通用环境配置 开发机 InterStudio 配置公钥 在本地机器上打开 Power Shell 终端。在终端中,运行以下命令来生成 SSH 密钥对: ssh-keygen -t rsa您将被提示选择密钥文件的保存位置,默认情况下是在 ~/.ssh/ 目录中。按 Enter …...
2024-02-12 Unity 编辑器开发之编辑器拓展3 —— EditorGUI
文章目录 1 GUILayout2 EditorGUI 介绍3 文本、层级、标签、颜色拾取3.1 LabelField3.2 LayerField3.3 TagField3.4 ColorField3.5 代码示例 4 枚举选择、整数选择、按下按钮4.1 EnumPopup / EnumFlagsField4.2 IntPopup4.3 DropdownButton4.4 代码示例 5 对象关联、各类型输入…...
shell脚本编译与解析
文章目录 shell变量全局变量(环境变量)局部变量设置PATH 环境变量修改变量属性 启动文件环境变量持久化 ./和. 的区别脚本编写判断 和循环命令行参数传入参数循环读取命令行参数获取用户输入 处理选项处理简单选项处理带值选项 重定向显示并且同时输出到…...
第64讲个人中心用户操作菜单实现
静态页面 <!-- 用户操作菜单开始 --><view class"user_menu"><!-- 订单管理开始 --><view class"order_wrap"><view class"order_title">我的订单</view><view class"order_content"><n…...
线性代数的本质——1 向量
向量是线性代数中最为基础的概念。 何为向量? 从物理上看, 向量就是既有大小又有方向的量,只要这两者一定,就可以在空间中随便移动。 从计算机应用的角度看,向量和列表很接近,可以用来描述某对象的几个不同…...
工业以太网交换机引领现代工厂自动化新潮流
随着科技的飞速发展,现代工厂正迎来一场前所未有的自动化变革,而工业以太网交换机的崭新角色正是这场变革的关键组成部分。本文将深入探讨工业以太网交换机与现代工厂自动化的紧密集成,探讨这一集成如何推动工业生产的智能化、效率提升以及未…...
Linux第46步_通过“添加自定义菜单”来学习menuconfig图形化配置原理
通过“添加自定义菜单”来学习menuconfig图形化配置原理,将来移植linux要用到。 自定义菜单要求如下: ①、在主界面中添加一个名为“My test menu”,此菜单内部有一个配置项。 ②、配置项为“MY TESTCONFIG”,此配置项处于菜单“My test m…...
推荐高端资源素材图库下载平台整站源码
推荐高端图库素材下载站的响应式模板和完整的整站源码,适用于娱乐网资源网。该模板支持移动端,并集成了支付宝接口。 演示地 址 : runruncode.com/tupiao/19692.html 页面设计精美,不亚于大型网站的美工水准,并且用户…...