VUE3基础
一、vue-router v4.x
介绍 | Vue Router
1、安装
yarn add vue-router@next
@next代表最新的版本
2、路由配置
在src目录下,新建router/index.ts,具体配置如下
import {RouteRecordRaw,createRouter,createWebHashHistory} from 'vue-router'
const routes:Array<RouteRecordRaw> = [{path: '/login',component: () => import('../views/Login.vue')},{path: '/register',component: () => import('../views/Register.vue')},{path: '/',component: () => import('../views/Home.vue')}
]
const router=createRouter({routes,history:createWebHashHistory()
})
export default router
必须在main.ts引入后挂载
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app=createApp(App)
app.use(router)
app.mount('#app')
3、路由跳转
路由跳转有两种方式
-
router-link,超链接的方式来跳转
-
通过useRouter这个hook来进行跳转
<template><div><h1>登录</h1><a href="#" @click="goRegister">没有账号,请注册</a></div>
</template>
<script lang='ts' setup>
import { reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter()
const goRegister=(e:MouseEvent)=>{e.preventDefault()router.push({path:'/register'})
}
</script>
4、路由传参
4.1、params参数
-
配置
const routes:Array<RouteRecordRaw>=[{path:'/newsDetail/:id',component:()=>import('../views/NewsDetail.vue')}
]
-
传参
<template><div><h3>新闻列表</h3><router-link to="/newsDetail/12">乌四地全票通过入俄!梅德韦杰夫:欢迎回家</router-link><br><router-link to="/newsDetail/13">美国副总统哈里斯遭遇车祸</router-link></div>
</template>
-
接收参数
<script lang='ts' setup>
import { reactive,ref,onMounted} from 'vue'
import {useRoute} from 'vue-router'
const route=useRoute()
onMounted(()=>{console.log(route.params.id);
})
</script>
4.2、query参数
-
配置
const routes:Array<RouteRecordRaw>=[{path:'/newsDetail',component:()=>import('../views/NewsDetail.vue')}
]
-
传参
方式一:使用
<router-link>
标签形式进行跳转并且使用?
的方式进行传递参数
<router-link to="/newsDetail?id=23">首页</router-link>
方式二:使用router.push
方式进行跳转并且使用query
属性方式进行传参
<template><div><h3>新闻列表</h3><a href="#" @click="skip($event,12)">乌四地全票通过入俄!梅德韦杰夫:欢迎回家</a><br><a href="#" @click="skip($event,13)">美国副总统哈里斯遭遇车祸</a></div>
</template><script lang='ts' setup>
import { reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter()
const skip=(e:MouseEvent,id:number)=>{e.preventDefault()router.push({path:`/newsDetail`,query:{id}})
}
</script>
-
接收参数
<script lang='ts' setup>
import { reactive,ref,onMounted} from 'vue'
import {useRoute} from 'vue-router'
const route=useRoute()
onMounted(()=>{console.log(route.query.id);
})</script>
二、vuex v4.x
官网地址:开始 | Vuex
1、安装
yarn add vuex@next
2、配置
-
在src/store/index.ts创建store实例
import {createStore} from 'vuex'
const store=createStore({state(){return{count:0}}
})
export default store
-
在main.js中挂载store
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app=createApp(App)
app.use(store)
app.mount('#app')
3、State
<template><h1>计数器:{{store.state.count}}</h1>
</template>
<script>
import {useStore} from 'vuex'
export default {setup(){const store=useStore()return {store}}
}
</script>
4、Mutation
Counter.vue组件
<template><h1>计数器:{{store.state.count}}</h1><button @click="increment">+</button>
</template><script>
import {useStore} from 'vuex'
export default {setup(){const store=useStore()const increment=()=>{store.commit('increment') //store.commit("方法名字")}return {store,increment}}
}
</script>
store/index.js
import {createStore} from 'vuex'
interface State{count:number
}
const store=createStore({state(){return{count:0}},mutations:{increment(state:State){state.count++}}
})
export default store
5、actions
触发action异步任务时携带参数
import {createStore} from 'vuex'
const store=createStore({state(){return{count:1}},mutations:{increment(state:State,n:number){state.count+=n}},actions:{incrementAsync(context:ActionContext<State,any>,n:number){setTimeout(() => {context.commit('increment',n)}, 2000);}}
})
export default store
组件中使用store.dispatch()派发异步任务
import {useStore} from 'vuex'
export default {setup(){const store=useStore()const increment=()=>{store.dispatch('incrementAsync',3)}return {store,increment}}
}
</script>
6、vuex模块化
6.1、创建modules目录
可以根据项目中数据的分类,来将仓库拆分成多个模块。通常我们会在src/store
目录中,创建一个modules
目录,用来存放所有的模块文件。
6.2、配置模块
每一个仓库模块中,都需要暴露一个对象出去,同时,需要设置一个属性
import {ActionContext} from 'vuex'
interface State{count:number
}
export default{namespaced:true,state(){return{count:1}},mutations:{increment(state:State,n:number){state.count+=n}},actions:{incrementAsync(context:ActionContext<State,any>,n:number){setTimeout(() => {context.commit('increment',n)}, 2000);}}
}
6.3、引入模块
模块配置完成之后,需要在主仓库src/store/index.js
文件中引入模块
import {createStore} from 'vuex'
import counter from './modules/counter'
const store=createStore({state(){},mutations:{},actions:{},modules:{counter}
})
export default store
6.4、组件操作模块
<template><h1>计数器:{{store.state.counter.count}}</h1> <!--store.state.模块名.变量名--><button @click="increment">+</button>
</template><script>
import {useStore} from 'vuex'
export default {setup(){const store=useStore()const increment=()=>{//store.dispatch("模块名/actions对应方法",参数)store.dispatch('counter/incrementAsync',3) }return {store,increment}}
}
</script>
6.5、辅助函数方式
<template><div><h1>计数器</h1><div>{{count}}</div><button @click="increment(2)">+</button></div>
</template><script lang='ts'>
import {createNamespacedHelpers} from 'vuex'
const {mapState,mapActions}=createNamespacedHelpers('couter')
import {computed} from 'vue'export default{computed:{...mapState(['count'])},methods:{...mapActions({increment:'incrementAsync'})}}
</script><style lang='scss' scoped>
</style>
三、pinia
1、概念
官网地址:Pinia | The intuitive store for Vue.js
Pinia 是 Vue 的存储库,它允许跨组件/页面共享状态。实际上,pinia就是Vuex的升级版,官网也说过,为了尊重原作者,所以取名pinia,而没有取名Vuex,所以大家可以直接将pinia比作为Vue3的Vuex
2、为什么要使用pinia
-
pinia中只有state、getter、action,抛弃了Vuex中的Mutation,Vuex中mutation一直都不太受小伙伴们的待见,pinia直接抛弃它了,这无疑减少了我们工作量。
-
pinia中action支持同步和异步,Vuex不支持
-
良好的Typescript支持,毕竟我们Vue3都推荐使用TS来编写,这个时候使用pinia就非常合适了
-
pinia分模块不需要modules
-
体积非常小,只有1KB左右。
3、安装和配置
在终端执行如下命令进行安装
yarn add pinia
在src/main.ts中引入
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
const pinia=createPinia()
const app=createApp(App)
app.use(pinia)
app.mount('#app')
4、快速入门
-
在src/store/counter.ts定义store
import {defineStore} from 'pinia'
const useCounterStore =defineStore('counter',{state:()=>{return{count:0}},getters:{doubleCount:state=>state.count*2},actions:{increment(){this.count++}}
})
export default useCounterStore
-
在组件中使用操作store
<template><div><h2>{{count}}</h2><button @click="increment">+</button></div>
</template><script lang='ts'>
import useCounterStore from './store/counter'
import {storeToRefs} from 'pinia'export default{setup(){const store=useCounterStore()const {count}=storeToRefs(store)const {increment}=storereturn{count,increment}}}
</script>
5、使用
import {defineStore} from 'pinia'interface IState{name:string,age:number,job:string
}const useUsersStore=defineStore('users',{state:():IState=>{return{name:'张三丰',age: 120,job: '掌门'}},getters:{getName:(state):string=>state.name,getAge:(state):number=>state.age,getJob:(state):string=>state.job,getUserInfo:(state):string=>`姓名:${state.name}\t年龄:${state.age}\t职业:{state.job}`},actions:{modifyUserInfo(name:string,age:number,job:string){this.name=namethis.age=agethis.job=job}}
})
export default useUsersStore
组件中使用store
<template><div><h1>用户信息</h1><div>姓名:{{name}}</div><div>年龄:{{age}}</div><div>职业:{{job}}</div><button @click="modifyUserInfo">修改用户信息</button><button @click="resetUserInfo">重置用户信息</button><button @click="patchUserInfo">批量修改</button></div>
</template><script lang='ts'>import useUsersStore from './store/users'import {storeToRefs} from 'pinia'export default{setup(){const store=useUsersStore()const {name,age,job}=storeToRefs(store)const modifyUserInfo=():void=>{store.modifyUserInfo('杨逍',20,'明教左使')}const resetUserInfo=():void=>{store.$reset()}const patchUserInfo=():void=>{store.$patch({name:'周芷若',age:21})}return {name,age,job,modifyUserInfo,resetUserInfo,patchUserInfo}}}
</script><style lang='scss' scoped>
</style>
6、持久化
-
下载安装
yarn add pinia-plugin-persist
-
修改之前的目录结构
在src/store/index.ts
import {createPinia} from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store=createPinia()
store.use(piniaPluginPersist)
export default store
修改main.ts文件
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app=createApp(App)
app.use(store)
app.mount('#app')
-
在相应的模块中开启持久化
import {defineStore} from 'pinia'
const useUsersStore=defineStore('users',{state:():=>{},getters:{},actions:{},persist:{enabled:true}
})
export default useUsersStore
默认情况下,pinia持久化的数据存储在sessionStorage中,如果要存储到localStorage中,设置如下
-
设置到localstorage中
import {defineStore} from 'pinia'
const useUsersStore=defineStore('users',{state:():=>{},getters:{},actions:{},persist:{enabled:true,strategies:[{key:'my_user',storage:localStorage}]}
})
export default useUsersStore
默认所有的state都会进行缓存,你能够通过paths指定要持久化的字段,其余的则不持久化
import {defineStore} from 'pinia'
const useUsersStore=defineStore('users',{state:():=>{},getters:{},actions:{},persist:{enabled:true,strategies:[{key:'my_user',storage:localStorage,paths:['name','job']}]}
})
export default useUsersStore
相关文章:
VUE3基础
一、vue-router v4.x 介绍 | Vue Router 1、安装 yarn add vue-routernext next代表最新的版本 2、路由配置 在src目录下,新建router/index.ts,具体配置如下 import {RouteRecordRaw,createRouter,createWebHashHistory} from vue-router const r…...

Qt应用开发(基础篇)——日历 QCalendarWidget
一、前言 QCalendarWidget类继承于QWidget,是Qt设计用来让用户更直观的选择日期的窗口部件。 时间微调输入框 QCalendarWidget根据年份和月份初始化,程序员也通过提供公共函数去改变他们,默认日期为当前的系统时间,用户通过鼠标和…...

Python学习笔记:正则表达式、逻辑运算符、lamda、二叉树遍历规则、类的判断
1.正则表达式如何写? 序号实例说明1.匹配任何字符(除换行符以外)2\d等效于[0-9],匹配数字3\D等效于[^0-9],匹配非数字4\s等效于[\t\r\n\f],匹配空格字符5\S等效于[^\t\r\n\f],匹配非空格字符6\w等效于[A-Za-z0-9]&…...

【滑动窗口】leetcode1004:最大连续1的个数
一.题目描述 最大连续1的个数 这道题要我们找最大连续1的个数,看到“连续”二字,我们要想到滑动窗口的方法。滑动窗口的研究对象是一个连续的区间,这个区间需要满足某个条件。那么本题要找的是怎样的区间呢?是一个通过翻转0后得到…...

力扣:73. 矩阵置零(Python3)
题目: 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 来源:力扣(LeetCode) 链接:力扣(LeetCode)官网 - 全球极客挚…...
VB|基础语法 变量定义 函数定义 循环语句 IF判断语句等
文章目录 变量定义函数定义控制台输入输出switch case语句IF语句FOR循环语句不等于逻辑运算符 变量定义 int Dim 变量名 As Int32 0 string Dim 变量名 As String "" bool Dim 变量名 As Boolean False 枚举 Dim 变量名 As 枚举名 数组 Dim array(256) As String…...
Github 博客搭建
Github 博客搭建 准备工作 准备一个 github 账号;建立 github 仓库,仓库名为 username.github.io,同时设置仓库为 public;clone 仓库,写入一个 index.html 文件,推送到仓库(许多网上的教程会有…...
模型预测笔记(三):通过交叉验证网格搜索机器学习的最优参数
文章目录 网络搜索介绍步骤参数代码实现 网络搜索 介绍 网格搜索(Grid Search)是一种超参数优化方法,用于选择最佳的模型超参数组合。在机器学习中,超参数是在训练模型之前设置的参数,无法通过模型学习得到。网格搜索…...

创建型模式-建造者模式
使用多个简单的对象一步一步构建成一个复杂的对象 主要解决:主要解决在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子对象用一定的算法构成;由于需求的变化,这个复杂对象的各个部…...

Rust常用加密算法
哈希运算(以Sha256为例) main.rs: use crypto::digest::Digest;use crypto::sha2::Sha256;fn main() { let input "dashen"; let mut sha Sha256::new(); sha.input_str(input); println!("{}", sha.result_str());} Cargo.toml: [package]n…...

[管理与领导-55]:IT基层管理者 - 扩展技能 - 1 - 时间管理 -2- 自律与自身作则,管理者管好自己时间的五步法
前言: 管理好自己的时间,不仅仅是理念,也是方法和流程。 步骤1:理清各种待办事项 当提到工作事项时,这通常指的是要完成或处理的工作任务或事务。这些事项可以包括以下内容: 任务分配:根据工作…...
电子商务员考试题库及答案(中级)--判断题
电子商务员题库 一、判断题 1.EDI就是按照商定的协议,将商业文件分类,并通过计算机网络,在贸易伙伴的计算机网络系统之间进行数据交换和自动处理。〔〕 2.相互通信的EDI的用户必须使用相同类型的计算机。〔 〕 3.EDI采用共同…...

(WAF)Web应用程序防火墙介绍
(WAF)Web应用程序防火墙介绍 1. WAF概述 Web应用程序防火墙(WAF)是一种关键的网络安全解决方案,用于保护Web应用程序免受各种网络攻击和威胁。随着互联网的不断发展,Web应用程序变得越来越复杂&#x…...
SpringMVC拦截器常见应用场景
在Spring MVC中,拦截器是通过实现HandlerInterceptor接口来定义的。该接口包含了三个方法: preHandle:在请求到达处理器之前执行,可以进行一些预处理操作。如果返回false,则请求将被拦截,不再继续执行后续的…...

爬虫:绕过5秒盾Cloudflare和DDoS-GUARD
本文章仅供技术研究参考,勿做它用! 5秒盾的特点 <title>Just a moment...</title> 返回的页面中不是目标数据,而是包含上面的代码:Just a moment... 或者第一次打开网页的时候: 这几个特征就是被Cloud…...
数据仓库环境下的超市进销存系统结构
传统的进销存系统建立的以单一数据库为中心的数据组织模式,已经无 法满足决策分析对数据库系统的要求,而数据仓库技术的出现和发展,为上述问题 的解决提供了强有力的工具和手段。数据仓库是一种对多个分布式的、异构的数据 库提供统一查询…...

leetcode:2011. 执行操作后的变量值(python3解法)
难度:简单 存在一种仅支持 4 种操作和 1 个变量 X 的编程语言: X 和 X 使变量 X 的值 加 1--X 和 X-- 使变量 X 的值 减 1 最初,X 的值是 0 给你一个字符串数组 operations ,这是由操作组成的一个列表,返回执行所有操作…...
ubuntu下mysql
安装: sudo apt update sudo apt install my_sql 安装客户端: sudo apt-get install mysql-client sudo apt-get install libmysqlclient-dev 启动服务 启动方式之一: sudo service mysql start 检查服务器状态方式之一:sudo …...
大模型从入门到应用——LangChain:链(Chains)-[链与索引:检索式问答]
分类目录:《大模型从入门到应用》总目录 下面这个示例展示了如何在索引上进行问答: from langchain.embeddings.openai import OpenAIEmbeddings from langchain.vectorstores import Chroma from langchain.text_splitter import CharacterTextSplitte…...

【LeetCode-中等题】142. 环形链表 II
文章目录 题目方法一:哈希表set去重方法二:快慢指针 题目 方法一:哈希表set去重 思路:我们遍历链表中的每个节点,并将它记录下来;一旦遇到了此前遍历过的节点,就可以判定链表中存在环。借助哈希…...

利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...

python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...

力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中,featureAbility是旧版FA模型(Feature Ability)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文获取方式,而非依赖featureAbility。 FA大概是API7之…...

DAY 45 超大力王爱学Python
来自超大力王的友情提示:在用tensordoard的时候一定一定要用绝对位置,例如:tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾: tensorboard的发展历史和原理tens…...
32位寻址与64位寻址
32位寻址与64位寻址 32位寻址是什么? 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元(地址),其核心含义与能力如下: 1. 核心定义 地址位宽:CPU或内存控制器用32位…...