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

vue学习8

news 来源：原创 2025/5/16 11:39:26

1.pinia（更优）

是vue最新的状态管理工具，是vuex的替代品
pinia：
state
actions(支持异步，可以直接修改state)
getters
优点：

提供更加简单的API(去掉了mutation)
提供符合，组合式的API语法(和vue3新语法统一)
去掉了modules的概念，每一个store都是一个独立的模块
配合TypeScript更加友好，提供可靠的类型推荐
创建pinia到vue项目
(1)npm create vue@latest
(2)按照官方文档

2.Setup Store

 export const useCounterStore = definestore('counter', () => {const count = ref(0)function increment() {count.value++}return (count, increment )})

请添加图片描述
actions异步实现

// 声明操作数据的方法
const getList = async () => {// 支持异步const { data: { data } } = await axios.get(''http://...)channelList.value = data.channel
}

直接解构，不处理，数据会丢失响应式
所以应该加上storeToRefs()
数据要加，对于方法（getters）的处理不用加

const { count, msg } = storeToRefs(counterStore)

2.pinia持久化

插件：pinia-plugin-perisistedstate

persist: true

请添加图片描述
默认配置：

3.vue大事件管理系统

请添加图片描述

1.pnpm包管理器

优势：比同类工具块两倍，节省磁盘空间
安装方式：npm install -g pnpm
创建项目：pnpm create vue
请添加图片描述

2.Eslint配置代码风格

配置文件：.eslintrc.cjs

prettier 风格配置 https://prettier.io
(1)单引号
(2)不使用分号
(3)宽度80字符
(4)不加对象、数组最后逗号
(5)换行符号不限制
vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

3.配置代码检查工作流

提交前做代码检查

初始化git仓库，执行git init即可
初始化husky工具配置，执行pnpm dlx husky-init && pnpm install 即可
修改 .husky/pre-commit文件

4.目录调整

删除一些初始化的默认文件
修改剩余代码内容
新增调整我们需要的目录结构
拷贝全局样式和图片，安装预处理器(sass)支持,pnpm add sass -D

5.路由初始化

请添加图片描述
history更多一点，因为不带井号的更美观

6.引入Element Plus的组件库

安装: pnpm add element-plus
配置按需导入
直接使用组件
默认cpmponents下面的文件也会被自动注册

7.pinia统一管理

pinia独立维护
直接引入pinia，import
仓库统一导出

export * from './modules/user'
export * from './modules/counter'

8.数据交互-请求工具设计

axios配置：

创建实例：基准地址，超时时间
请求拦截器：携带token
响应拦截器：业务失败处理，摘取核心响应数据，401处理

// 响应拦截器
instance.interceptors.response.use((res) => {// TODO 3. 处理业务失败// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}// 处理业务失败return res}，（err）=> {// TODO 5. 401处理return Promise.rereject(err)}
)

9.整体路由设计

约定路由规则
请添加图片描述

4.写页面了

1.登录注册页面

element-plus表单&表单校验
功能需求：

注册登录，静态结构 & 基本切换

使用el-row和el-form实现的
注册功能（校验+注册）

el-form =>  :model="ruleForm"  绑定的是整个form的数据对象{xxx,xxx,xxx}
el-form =>  :rules="rules"     绑定的是整个rules的数据对象{xxx,xxx,xxx}
prop配置生效的是那个校验规则(和rules中的字段要对应)  prop="name"
表单元素  v-model="ruleForm.name"  给表单元素，绑定from的子属性

自定义校验：
请添加图片描述
3. 登录功能（校验+登录+存token）

存token,调用方法，将token存入pinia并自动持久化本地

const userStore = useUserStore()
const router = useRouter()
const login = async() => {await form.value.validate()const res = await userLoginService(formModel.value)userStore.setToken(res.data.token)ElMessage.success(''登陆成功")router.push('/')
}

2.首页layout架子

element-plus菜单组件

基本架子拆解(菜单组件的使用)
登录访问拦截 -> 默认是直接拦截的

根据返回值决定放行还是拦截
返回值：
undefined/true放行
这里是引用
false拦回from的页面
具体路径或路径对象拦截到对应的地址
‘/login’ {name: ‘login’}
如果没有token,且访问的是非登录页，拦截到登录，其他情况正常放行

用户基本信息获取&渲染
退出功能(element-plus确认框)

vue学习8

1.pinia（更优） 是vue最新的状态管理工具，是vuex的替代品 pinia： state actions(支持异步，可以直接修改state) getters 优点： 提供更加简单的API(去掉了mutation)提供符合，组合式的API语法(和v…...

编程日记 2025/5/16 11:39:26

【竞技宝】电竞世界杯：无畏契约首次入选正式项目！

北京时间2月12日，电竞世界杯基金会（EWCF）与知名游戏开发商拳头游戏（Riot Games）在近日共同宣布达成三年合作伙伴关系。同时，三大顶级电竞项目——《英雄联盟》《英雄联盟：云顶之弈》&#xff08…...

编程日记 2025/5/14 5:45:37

Bigemap Pro地图配置文件包

配置文件获取配置文件下载后，直接拖入软件中自动识别导入图源，一键完成加载。...

编程日记 2025/4/25 7:18:13

有哪些免费的SEO软件优化工具

随着2025年互联网的不断发展，越来越多的企业意识到在数字营销中，网站的曝光度和排名至关重要。无论是想要提高品牌知名度，还是想要通过在线销售增加收益，SEO（搜索引擎优化）都是一项不可忽视的关键策略。而要…...

编程日记 2025/5/10 13:14:02

第二天：工具的使用

每天上午9点左右更新一到两篇文章到专栏《Python爬虫训练营》中，对于爬虫有兴趣的伙伴可以订阅专栏一起学习，完全免费。键盘为桨，代码作帆。这趟为期30天左右的Python爬虫特训即将启航，每日解锁新海域：从Requests库的…...

编程日记 2025/5/6 14:04:51

分享在职同时准备系统分析师和教资考试的时间安排

（在职、时间有限、同时备考系统分析师考试和小学信息技术教资面试），以下是详细的备考计划，确保计划的可行性和通过性。一、总体安排时间分配： 每周周末（2天）用于系统分析师考试备考。工作日晚…...

编程日记 2025/5/11 17:48:04

从Word里面用VBA调用NVIDIA的免费DeepSeekR1

看上去能用而已。选中的文字作为输入，运行对应的宏即可；会先MSGBOX提示一下，然后相关内容追加到word文档中。需要自己注册生成好用的apikey Option ExplicitSub DeepSeek()Dim selectedText As StringDim apiKey As StringDim response A…...

编程日记 2025/5/11 13:21:26

3.2 ＞ Bash

概览在上一节中我们了解了关于 Shell 的执行流程，知道了在 Linux 环境中一般有哪些常用的 Shell。而在本节中，将会学习到 Linux 中最常见的一个 Shell —— Bash，了解到 bash 的相关知识和用法。本节目录概览相关知识bash 命令提示符bas…...

编程日记 2025/5/15 14:22:48

游戏引擎学习第100天

仓库:https://gitee.com/mrxiao_com/2d_game_2 昨天的回顾今天的工作重点是继续进行反射计算的实现。昨天，我们开始了反射和环境贴图的工作，成功地根据法线显示了反射效果。然而，我们还没有实现反射向量的计算，导致反射交点的代…...

编程日记 2025/5/11 13:21:29

新一代SCADA: 宏集Panorama Suite 2025 正式发布，提供更灵活、符合人体工学且安全的应用体验

宏集科技宣布正式推出全新Panorama Suite 2025 SCADA软件！全新版本标志着 Panorama Suite的一个重要里程碑，代表了从 Panorama Suite 2022 开始并跨越三个版本（2022、2023、2025）的开发过程的顶峰。此次重大发布集中在六个核心主…...

编程日记 2025/5/15 20:02:35

Visual Studio 进行单元测试【入门】

摘要：在软件开发中，单元测试是一种重要的实践，通过验证代码的正确性，帮助开发者提高代码质量。本文将介绍如何在VisualStudio中进行单元测试，包括创建测试项目、编写测试代码、运行测试以及查看结果。 1. 什么是单元测…...

编程日记 2025/5/13 7:42:50

Notepad++ 中删除所有以 “pdf“ 结尾的行

Notepad 中删除所有以 “pdf” 结尾的行操作步骤 1.打开文件： 在 Notepad 中打开你需要处理的文本文件。 2.打开查找和替换对话框： 按快捷键 Ctrl F，打开“查找和替换”对话框。 3.启用正则表达式模式： 在对话框的底部&#xf…...

编程日记 2025/5/14 2:03:36

Java 使用腾讯翻译 API 实现含 HTML 标签文本，json值，精准翻译工具

注意：需搭配标题二的腾讯翻译工具使用一-1、翻译标签文本工具 package org.springblade.common.utils;import java.util.ArrayList; import java.util.List; import java.util.regex.Matcher; import java.util.regex.Pattern;public class TencentTranslationFor…...

编程日记 2025/5/10 17:17:25

DeepSeek R1+Open WebUI +SearXNG 本地化部署与联网功能

GitHub - searxng/searxng-docker: The docker-compose files for setting up a SearXNG instance with docker....

编程日记 2025/4/18 2:26:21

数据科学之数据管理|NumPy数据管

一、Numpy介绍 (一) 什么是numpy NumPy是Python中科学计算的基础包。它是一个Python库，提供多维数组对象，各种派生对象（如掩码数组和矩阵），以及用于数组快速操作的各种API，有包括数学、逻辑、形状操作、排序、选择、输入输出、离散傅立叶变换、基本线性代数，基本统计运…...

编程日记 2025/5/11 3:16:34

零基础玩转 DeepSeek API实战教程

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于大模型算法的研究与应用。曾担任百度千帆大模型比赛、BPAA算法大赛评委，编写微软OpenAI考试认证指导手册。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。授权多项发明专利。对机器学…...

编程日记 2025/5/16 8:49:54

【GPIO】5.理解保护二极管在GPIO过电压保护中的作用

在电子电路设计中，保护二极管是常见的保护元件，用于防止过电压对敏感电路的损害。本文将探讨当GPIO输入电压大于3.3V时，保护二极管如何工作，并解释为什么大部分过电压引起的电流会通过二极管流向VDD而不是流入内部电路。 1.背景 …...

编程日记 2025/5/7 4:39:54

2.5 模块化迁移策略：从传统项目到模块化系统

模块化迁移策略：从传统项目到模块化系统将传统 Java 项目迁移至 JDK 9 模块化系统是一项系统性工程，需分阶段实施以降低风险。以下是详细的迁移策略、工具使用和实战示例。 1. 迁移阶段划分阶段目标关键操作阶段1：兼容性验证确保项目能在…...

编程日记 2025/5/11 15:55:59

Tortoise Git

TortoiseGit 是一个 Windows Shell 与 Git 的接口，它提供了文件状态的覆盖图标，强大的 Git 上下文菜单等。你可以在官方网站 (tortoisegit.org) 轻松使用安装程序进行下载。TortoiseGit 的当前稳定版本是 2.14.0 ，根据你的机器配置&#xff0…...

编程日记 2025/5/14 12:18:08

Maven Spring框架依赖包

Maven中添加Spring框架依赖包 Spring核心工具包SpringJDBCSpring配置文件头信息 Spring核心工具包在pom.xml文件中添加 <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spr…...

编程日记 2025/5/12 11:37:36

【Cocos TypeScript 零基础 15.1】

目录见缝插针UI脚本针脚本球脚本心得_旋转心得_更改父节点心得_缓动动画成品展示图见缝插针本人只是看了老师的大纲,中途不明白不会的时候再去看的视频所以代码可能与老师代码有出入 SIKI_学院_点击跳转 UI脚本 import { _decorator, Camera, color, Component, directo…...

编程日记 2025/5/15 1:16:05

Linux库制作与原理：【静态库】【动态库】【目标文件】【ELF文件】【ELF从形成到假造轮廓】【理解链接和加载】

目录一.什么是库二.静态库 2.1创建静态库我们在之前的路径下新建lib使用我们自己的库 2.2 使用makefile生成静态库三.动态库 3.1动态库生成 3.2动态库使用 3.3库运行搜索路径四.目标文件五.ELF文件六.ELF从形成到加载轮廓 6.1ELF形成可执行 6.2 ELF可执行文…...

编程日记 2025/5/12 15:44:07

中间件-redis-(ubantu)

1、安装依赖包 sudo apt-get update sudo apt-get install redis 一旦安装完成，Redis 服务将会自动启动。想要检查服务的状态，输入下面的命令： rootvims:/etc/redis# sudo systemctl status redis-server ● redis-server.service - Adva…...

编程日记 2025/5/13 12:45:30

ubuntu20.04+ROS+Gazebo+px4+QGC+MAVROS

目录前言一、安装ROS 二、安装PX4 编译三、QGC安装四、安装MAVROS 命令记得加sudo！ 前言在安装ubuntu20.04ROSGazebopx4QGCMAVROS时，参考了很多网上的资料，总结一个较为顺利的流程。官方指南PX4 自动驾驶仪用户指南 | PX4 Gui…...

编程日记 2025/5/12 23:26:16

基于 openEuler 构建 LVS-DR 群集（同网段）。

一、LVS相关原理 1.LVS简介 LVS是Linux Virtual Server的简称，也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目，它的官方站点是www.linuxvirtualserver.org。现在LVS已经是 Linux标准内核的一部分，在 Linux2.4内核以前&…...

编程日记 2025/5/13 15:47:54

计算机毕业设计PySpark+Hadoop+Hive机票预测飞机票航班数据分析可视化大屏航班预测系统机票爬虫飞机票推荐系统大数据毕业设计

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2025/5/13 6:55:09

【设计模式】【行为型模式】观察者模式（Observer）

👋hi，我不是一名外包公司的员工，也不会偷吃茶水间的零食，我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 📫 欢迎V： flzjcsg2，我们共同讨论Java深渊的奥秘 &#x1f…...

编程日记 2025/5/11 13:06:10

机器学习: 逻辑回归

概念与定义逻辑回归是一种用于分类问题的统计方法。它通过计算目标变量的概率来预测类别归属，并假设数据服从伯努利分布（二分类）或多项式分布（多分类）。逻辑回归模型输出的是概率值，通常使用sigmoid函数将线性组合映射到0和1之间。 1. 概念逻辑回归用于解决分类问题…...

编程日记 2025/5/10 0:49:02

域名解析—互联网世界的导航系统

在互联网的世界里，每个网站都像一座“城市”，而用户要找到这些“城市”，必须依赖一套精准的导航系统——这就是域名解析。无论是浏览网页、发送邮件，还是使用移动应用，域名解析都在背后默默支撑着用户的每一次访问。本…...

编程日记 2025/5/12 3:18:47

PAT乙级真题 — 1080 MOOC期终成绩(java)【测试点3超时】

对于在中国大学MOOC（http://www.icourse163.org/ ）学习“数据结构”课程的学生，想要获得一张合格证书，必须首先获得不少于200分的在线编程作业分，然后总评获得不少于60分（满分100）。总评成绩的计…...

编程日记 2025/5/15 17:33:10

【Prometheus】如何通过prometheus监控redis实时运行状态，并实现告警通知

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，…...

编程日记 2025/5/11 14:37:46

ARM Cortex-M3/M4 权威指南笔记【一】技术综述

一、Cortex-M3/M4 处理器的一般信息 1.1 处理器类型 ARM Cortex-M 为 32 位 RISC（精简指令集）处理器，其具有： 32位寄存器32位内部数据通路32位总线接口除了 32 位数据，Cortex-M 处理器（以及其他任何 A…...

编程日记 2025/5/15 10:45:33

【Qt】定期清理程序

在现有Qt程序中实现可配置日志保存天数的代码示例，分为界面修改、配置存储和核心逻辑三部分： // 1. 在配置文件（如settings.h）中添加保存天数的配置项 class Settings { public:int logRetentionDays() const {return m_settings…...

编程日记 2025/5/14 22:26:52

基于51单片机的门禁刷卡器proteus仿真

地址：https://pan.baidu.com/s/1j0KAmH5pVGWZWRpT6p5hBg 提取码：1234 仿真图： 芯片/模块的特点： AT89C52/AT89C51简介： AT89C52/AT89C51是一款经典的8位单片机，是意法半导体（STMicroelectron…...

编程日记 2025/5/14 17:44:08

二、数据持久化篇（深度增强版）

二、数据持久化篇（深度增强版） 2.1 JDBC Template深度解析架构设计思想 #mermaid-svg-y2IrKiVu2gzenoCB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-y2IrKiVu2gzenoCB .error-icon{fil…...

编程日记 2025/5/14 5:06:32

时间敏感和非时间敏感流量的性能保证配置

论文标题中文标题： 时间敏感和非时间敏感流量的性能保证配置英文标题： Provisioning of Time-Sensitive and non-Time-Sensitive Flows with Assured Performance 作者信息 Luis Velasco, Gianluca Graziadei, Sima Barzegar, Marc Ruiz Optical Co…...

编程日记 2025/5/12 8:49:49

k8s管理工具之lens

什么是lens Lens 是当前市场上最强大的K8S IDE。它是一个独立的单机应用，可以同时运行在macOS、Windows和Linux上。作为K8S IDE，该有的它基本都有了！ 集群管理导入已有集群首先，你需要在 Lens 中添加你的 Kubernetes 集群。点…...

编程日记 2025/5/12 12:25:58

kafka介绍，kafka集群环境搭建，kafka命令测试，C++实现kafka客户端

目录 kafka介绍kafka集群环境搭建zookeeper安装与配置kafka安装与配置 kafka命令测试C实现kafka客户端librdkafka库编译新版本cmake编译cppkafka库编译C实现kafka生产者和消费者客户端 kafka介绍定义与概述 Apache Kafka 是一个开源的分布式流处理平台，最初由 Lin…...

编程日记 2025/5/15 13:22:32

DeepSeek的蒸馏技术：让模型推理更快

DeepSeek系列模型，如DeepSeek-R1-Distill-Qwen-7B，采用了知识蒸馏（Knowledge Distillation）技术，这是一种强大的模型压缩和优化方法。通过蒸馏，DeepSeek模型在保持甚至提升性能的同时，实现了更快…...

编程日记 2025/5/11 22:22:13

SAP-ABAP：dialog界面中的数据块Event Block详解举例

在SAP的Dialog程序开发中，Event Block（事件块）是屏幕流逻辑（Flow Logic）中的关键部分，用于定义屏幕在特定事件触发时执行的逻辑。Event Block通常与ABAP模块（Module）结合使用&#x…...

编程日记 2025/5/12 10:24:14

微信小程序 - 模版语法

声明和绑定数据小程序页面中使用的数据均需要在 Page() 方法的 data 对象中进行声明定义在将数据声明好以后，需要在 WXML 中绑定数据，数据绑定最简单的方式是使用 Mustache 语法（双大括号）将变量包起来。在 {{ }} 内部可以做…...

编程日记 2025/5/6 20:55:04

mapbox进阶，添加绘图扩展插件，裁剪线

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️MapboxDraw 绘图控件二、🍀添加绘图扩…...

编程日记 2025/5/14 13:56:14

Dav_笔记14：优化程序提示 HINTs -2

优化方法和目标的提示 ALL_ROWS和FIRST_ROWS（n）提示允许您在优化方法和目标之间进行选择。如果SQL语句具有指定优化方法和目标的提示，则优化程序将使用指定的方法，无论是否存在统计信息，OPTIMIZER_MODE初始化参数的值…...

编程日记 2025/5/14 13:25:58

Oracle ORA-00054

ORA-00054: resource busy and acquire with NOWAlT specified or timeout expire 错误 ORA-00054: resource busy and acquire with NOWAIT specified or timeout expired 是 Oracle 数据库中常见的一个错误，通常发生在尝试获取一个已经被其他会话占用的资源时。这…...

编程日记 2025/5/14 17:20:46