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

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目录下&#xff0c;新建router/index.ts&#xff0c;具体配置如下 import {RouteRecordRaw,createRouter,createWebHashHistory} from vue-router const r…...

Qt应用开发(基础篇)——日历 QCalendarWidget

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

Python学习笔记:正则表达式、逻辑运算符、lamda、二叉树遍历规则、类的判断

1.正则表达式如何写&#xff1f; 序号实例说明1.匹配任何字符(除换行符以外)2\d等效于[0-9]&#xff0c;匹配数字3\D等效于[^0-9]&#xff0c;匹配非数字4\s等效于[\t\r\n\f]&#xff0c;匹配空格字符5\S等效于[^\t\r\n\f]&#xff0c;匹配非空格字符6\w等效于[A-Za-z0-9]&…...

【滑动窗口】leetcode1004:最大连续1的个数

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

力扣:73. 矩阵置零(Python3)

题目&#xff1a; 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚…...

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 账号&#xff1b;建立 github 仓库&#xff0c;仓库名为 username.github.io&#xff0c;同时设置仓库为 public&#xff1b;clone 仓库&#xff0c;写入一个 index.html 文件&#xff0c;推送到仓库&#xff08;许多网上的教程会有…...

模型预测笔记(三):通过交叉验证网格搜索机器学习的最优参数

文章目录 网络搜索介绍步骤参数代码实现 网络搜索 介绍 网格搜索&#xff08;Grid Search&#xff09;是一种超参数优化方法&#xff0c;用于选择最佳的模型超参数组合。在机器学习中&#xff0c;超参数是在训练模型之前设置的参数&#xff0c;无法通过模型学习得到。网格搜索…...

创建型模式-建造者模式

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

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- 自律与自身作则,管理者管好自己时间的五步法

前言&#xff1a; 管理好自己的时间&#xff0c;不仅仅是理念&#xff0c;也是方法和流程。 步骤1&#xff1a;理清各种待办事项 当提到工作事项时&#xff0c;这通常指的是要完成或处理的工作任务或事务。这些事项可以包括以下内容&#xff1a; 任务分配&#xff1a;根据工作…...

电子商务员考试题库及答案(中级)--判断题

电子商务员题库 一、判断题 1&#xff0e;EDI就是按照商定的协议&#xff0c;将商业文件分类&#xff0c;并通过计算机网络&#xff0c;在贸易伙伴的计算机网络系统之间进行数据交换和自动处理。〔〕 2.相互通信的EDI的用户必须使用相同类型的计算机。〔 〕 3.EDI采用共同…...

(WAF)Web应用程序防火墙介绍

&#xff08;WAF&#xff09;Web应用程序防火墙介绍 1. WAF概述 ​ Web应用程序防火墙&#xff08;WAF&#xff09;是一种关键的网络安全解决方案&#xff0c;用于保护Web应用程序免受各种网络攻击和威胁。随着互联网的不断发展&#xff0c;Web应用程序变得越来越复杂&#x…...

SpringMVC拦截器常见应用场景

在Spring MVC中&#xff0c;拦截器是通过实现HandlerInterceptor接口来定义的。该接口包含了三个方法&#xff1a; preHandle&#xff1a;在请求到达处理器之前执行&#xff0c;可以进行一些预处理操作。如果返回false&#xff0c;则请求将被拦截&#xff0c;不再继续执行后续的…...

爬虫:绕过5秒盾Cloudflare和DDoS-GUARD

本文章仅供技术研究参考&#xff0c;勿做它用&#xff01; 5秒盾的特点 <title>Just a moment...</title> 返回的页面中不是目标数据&#xff0c;而是包含上面的代码&#xff1a;Just a moment... 或者第一次打开网页的时候&#xff1a; 这几个特征就是被Cloud…...

数据仓库环境下的超市进销存系统结构

传统的进销存系统建立的以单一数据库为中心的数据组织模式&#xff0c;已经无 法满足决策分析对数据库系统的要求&#xff0c;而数据仓库技术的出现和发展&#xff0c;为上述问题 的解决提供了强有力的工具和手段。数据仓库是一种对多个分布式的、异构的数据 库提供统一查询…...

leetcode:2011. 执行操作后的变量值(python3解法)

难度&#xff1a;简单 存在一种仅支持 4 种操作和 1 个变量 X 的编程语言&#xff1a; X 和 X 使变量 X 的值 加 1--X 和 X-- 使变量 X 的值 减 1 最初&#xff0c;X 的值是 0 给你一个字符串数组 operations &#xff0c;这是由操作组成的一个列表&#xff0c;返回执行所有操作…...

ubuntu下mysql

安装&#xff1a; sudo apt update sudo apt install my_sql 安装客户端&#xff1a; sudo apt-get install mysql-client sudo apt-get install libmysqlclient-dev 启动服务 启动方式之一&#xff1a; sudo service mysql start 检查服务器状态方式之一&#xff1a;sudo …...

大模型从入门到应用——LangChain:链(Chains)-[链与索引:检索式问答]

分类目录&#xff1a;《大模型从入门到应用》总目录 下面这个示例展示了如何在索引上进行问答&#xff1a; from langchain.embeddings.openai import OpenAIEmbeddings from langchain.vectorstores import Chroma from langchain.text_splitter import CharacterTextSplitte…...

【LeetCode-中等题】142. 环形链表 II

文章目录 题目方法一&#xff1a;哈希表set去重方法二&#xff1a;快慢指针 题目 方法一&#xff1a;哈希表set去重 思路&#xff1a;我们遍历链表中的每个节点&#xff0c;并将它记录下来&#xff1b;一旦遇到了此前遍历过的节点&#xff0c;就可以判定链表中存在环。借助哈希…...

利用最小二乘法找圆心和半径

#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 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

python打卡day49

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

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

力扣热题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了&#xff0c;就不必写成功和失败的回调函数了 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的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...

DAY 45 超大力王爱学Python

来自超大力王的友情提示&#xff1a;在用tensordoard的时候一定一定要用绝对位置&#xff0c;例如&#xff1a;tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾&#xff1a; tensorboard的发展历史和原理tens…...

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么&#xff1f; 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元&#xff08;地址&#xff09;&#xff0c;其核心含义与能力如下&#xff1a; 1. 核心定义 地址位宽&#xff1a;CPU或内存控制器用32位…...