vue学习笔记8
Pinia基础使用 - 计数器案例
定义Store(state + action)

组件使用Store
getters实现
Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去
action异步实现
编写方式:异步action函数的写法和组件中获取异步数据的写法完全一致接口地址:
需求:在Pinia中获取频道列表数据并把数据渲染App组件的模板中
storeToRefs工具函数
使用storeToRefs函数可以辅助保持数据(state + getter)的响应式解构


pinia持久化插件

Pinia 如何快速实现持久化?
pinia-plugin-persistedstate
Vue3 大事件管理系统
创建项目

1. 进入项目目录
2. 安装依赖
3. 启动项目
Eslint 配置代码风格
配置文件 .eslintrc.cjs
1. prettier 风格配置
1. 单引号
2. 不使用分号
3. 宽度80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制(win mac 不一致)
2. vue组件名称多单词组成(忽略index.vue)
3. props解构(关闭)
注:安装Eslint且配置保存修复,不 要开启默认的自动保存格式化

暂存区 eslint 校验
1. 安装 lint-staged 包 pnpm i lint-staged -D
2. package.json 配置 lint-staged 命令
3. .husky/pre-commit 文件修改

目录调整
默认生成的目录结构不满足我们的开发需求,所以这里需要做一些自定义改动。
主要是以下工作:
1. 删除一些初始化的默认文件
2. 修改剩余代码内容
3. 新增调整我们需要的目录结构
4. 拷贝全局样式和图片,安装预处理器支持
路由初始化


创建路由实例由 createRouter 实现
路由模式
1. history 模式使用 createWebHistory()
2. hash 模式使用 createWebHashHistory()
3. 参数是基础路径

按需引入 Element Plus
Pinia 构建用户仓库 和 持久化

Pinia 仓库统一管理
pinia 独立维护
初始化代码在 main.js 中,仓库代码在 stores 中,代码分散职能不单一
优化:由 stores 统一维护,在 stores/index.js 中完成 pinia 初始化,交付 main.js 使用
仓库 统一导出
使用一个仓库 import { useUserStore } from `./stores/user.js` 不同仓库路径不一致
优化:由 stores/index.js 统一导出,导入路径统一 `./stores`,而且仓库维护在 stores/modules 中
首页整体路由设计

相关文章:
vue学习笔记8
Pinia基础使用 - 计数器案例 定义Store(state action) 组件使用Store getters实现 Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去 action异步实现 编写方式:异步action函数的写法和组件…...
【自学笔记】Vue基础知识点总览-持续更新
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 Vue重点知识点总览一、Vue基础1. Vue简介2. MVVM设计思想3. 响应式数据绑定4. 组件化开发 二、Vue核心特性1. 虚拟DOM2. 模板语法3. 计算属性与监听属性 三、Vue高级…...
ETL的使用(sqoop):数据导入,导出
ETL ETL: 是数据抽取(Extract)、数据转换(Transform)和数据加载(Load)的整个过程 常用的ETL工具 sqoop 1.Apache Sqoop 是 Apache 软件基金会旗下的一个开源项目,旨在帮助用户高效地在 Hado…...
【核心特性】从鸭子类型到Go的io.Writer设计哲学
在编程语言的设计中,鸭子类型和接口设计是两种非常重要的理念。它们都强调了对象的行为和能力,而非其具体的类型或继承关系。Go 语言的io.Writer 接口是这种设计理念的典型代表,它通过简洁的接口定义,实现了强大的功能和灵活性。 …...
多模态模型详解
多模态模型是什么 多模态模型是一种能够处理和理解多种数据类型(如文本、图像、音频、视频等)的机器学习模型,通过融合不同模态的信息来提升任务的性能。其核心在于利用不同模态之间的互补性,增强模型的鲁棒性和准确性。 如何融合…...
Go 语言里中的堆与栈
在 Go 语言里,堆和栈是内存管理的两个重要概念,它们在多个方面存在明显差异: 1. 内存分配与回收方式 栈 分配:Go 语言中,栈内存主要用于存储函数的局部变量和调用信息。当一个函数被调用时,Go 会自动为其…...
八、OSG学习笔记-
前一章节: 七、OSG学习笔记-碰撞检测-CSDN博客https://blog.csdn.net/weixin_36323170/article/details/145558132?spm1001.2014.3001.5501 一、了解OSG图元加载显示流程 本章节代码: OsgStudy/wids CuiQingCheng/OsgStudy - 码云 - 开源中国https:…...
本地部署【LLM-deepseek】大模型 ollama+deepseek/conda(python)+openwebui/docker+openwebui
通过ollama本地部署deepseek 总共两步 1.模型部署 2.[web页面] 参考官网 ollama:模型部署 https://ollama.com/ open-webui:web页面 https://github.com/open-webui/open-webui 设备参考 Mac M 芯片 windows未知 蒸馏模型版本:deepseek-r1:14b 运行情况macminim2 24256 本地…...
网络分析工具—WireShark的安装及使用
Wireshark 是一个广泛使用的网络协议分析工具,常被网络管理员、开发人员和安全专家用来捕获和分析网络数据包。它支持多种网络协议,能够帮助用户深入理解网络流量、诊断网络问题以及进行安全分析。 Wireshark 的主要功能 数据包捕获与分析: …...
MobaXterm的图形化界面支持:原理与分辨率问题解决
1. 概述 MobaXterm 是一款功能强大的远程访问工具,支持SSH、RDP、X11、VNC等多种协议,并内置了强大的图形界面支持,让用户能够在远程操作Linux/Unix系统时,享受到类似本地桌面的流畅体验。 与传统的SSH客户端不同,Mo…...
Java JVM(Java Virtual Machine)解析
Java Virtual Machine(JVM)是Java平台的核心组成部分,它负责执行Java字节码,并提供了一个运行时环境。本文将深入探讨JVM的工作原理、组成部分以及其在Java开发中的重要性。 一、JVM的基本概念 JVM是一个虚拟的计算机࿰…...
pytest测试专题 - 1.2 如何获得美观的测试报告
<< 返回目录 1 pytest测试专题 - 1.2 如何获得美观的测试报告 1.1 背景 虽然pytest命令的报文很详细,用例在执行调试时还算比较方便阅读和提取失败信息, 但对于大量测试用例运行时,可能会存在以下不足 报文被冲掉测试日志没法归档 …...
现阶段股指期货交易保证金和费用多少?股指期货一手多少钱?
股指期货交易的保证金就是你在买卖股指期货合约时,需存入交易账户的一笔资金。 股指期货交易保证金是多少? 股指期货的交易保证金就像是租房时的押金,确保你能承担交易带来的风险。 一般来说,保证金的比例大概在合约价值的12-14…...
使用mermaid画流程图
本文介绍使用mermaid画流程图,并给出几个示例。 背景 目前,除有明确格式要求的文档外,笔者一般使用markdown写文档、笔记。当文档有图片时,使用Typora等软件可实时渲染,所见即所得。但如果文档接收方没有安装相关工具…...
大模型笔记:pytorch实现MOE
0 导入库 import torch import torch.nn as nn import torch.nn.functional as F 1 专家模型 #一个简单的专家模型,可以是任何神经网络架构 class Expert(nn.Module):def __init__(self, input_size, output_size):super(Expert, self).__init__()self.fc nn.L…...
HAL库USART中断接收的相关问题
文章目录 一、使用中断的步骤二、相关函数分析1、HAL_UART_IRQHandler2、UART_Receive_IT3、HAL_UART_Receive_IT4、UART_Start_Receive_IT5、总结 三、HAL库使用心得 一、使用中断的步骤 1、配置GPIO 2、配置USART1 3、设置UART1中断优先级(不开启手动中断&#x…...
@Transational事务注解底层原理以及什么场景事务会失效
Transactional的底层是如何实现的 底层是通过动态代理实现的。Spring Boot 在运行时会生成一个代理对象,该代理对象被注解的方法调用,并在方法调用前后进行事务管理,事务管理包括开启事务,提交事务或回滚事务等操作。 1开启事务 …...
Linux扩容磁盘
启动 fdisk sudo fdisk /dev/sda输入p命令查询分区列表 输入d命令删除所有分区 需要一个一个删 输入n命令创建新分区 40G可以不用输入,直接回车使用默认 输入w命令保存操作 查看分区情况 sudo fdisk -l会发现sda1不是启动分区(Boot列不是号&a…...
全面解析鸿蒙(HarmonyOS)开发:从入门到实战,构建万物互联新时代
文章目录 引言 一、鸿蒙操作系统概述二、鸿蒙开发环境搭建三、鸿蒙核心开发技术1. **ArkUI框架**2. **分布式能力开发**3. **原子化服务与元服务** 四、实战案例:构建分布式音乐播放器五、鸿蒙开发工具与调试技巧六、鸿蒙生态与未来展望结语 引言 随着万物互联时代…...
Uniapp 原生组件层级过高问题及解决方案
文章目录 一、引言🏅二、问题描述📌三、问题原因❓四、解决方案💯4.1 使用 cover-view 和 cover-image4.2 使用 subNVue 子窗体4.3 动态隐藏原生组件4.4 使用 v-if 或 v-show 控制组件显示4.5 使用 position: fixed 布局 五、总结Ἰ…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中,如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议(2PC)通过准备阶段与提交阶段的协调机制,以同步决策模式确保事务原子性。其改进版本三阶段提交协议(3PC…...
数据分析六部曲?
引言 上一章我们说到了数据分析六部曲,何谓六部曲呢? 其实啊,数据分析没那么难,只要掌握了下面这六个步骤,也就是数据分析六部曲,就算你是个啥都不懂的小白,也能慢慢上手做数据分析啦。 第一…...
js 设置3秒后执行
如何在JavaScript中延迟3秒执行操作 在JavaScript中,要设置一个操作在指定延迟后(例如3秒)执行,可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法,它接受两个参数: 要执行的函数&…...
虚幻基础:角色旋转
能帮到你的话,就给个赞吧 😘 文章目录 移动组件使用控制器所需旋转:组件 使用 控制器旋转将旋转朝向运动:组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转:必须移动才能旋转,不移动不旋转控制器…...
