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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/55749.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

NO.04 MyBatis的各种查询功能

NO.04 MyBatis的各种查询功能

目录 1、查询一个实体类对象 2、查询一个List集合 3、查询单个数据 5、查询多条数据并存储在Map集合中 5.1 方法一&#xff1a;将数据存储在map集合中&#xff0c;再将map集合存储在List集合中 5.2 方法二&#xff1a;将数据存储在map集合中 6、MyBatis中为Java中常用的…
阅读更多...
JavaWeb 速通JQuery

JavaWeb 速通JQuery

目录 一、JQuery快速入门 1.基本介绍 : 2.入门案例 : 二、JQuery对象 1.基本介绍 : 2.DOM对象 --> JQuery对象 : 3.JQuery对象 --> DOM对象 : 三、JQuery选择器 1.简介 : 2.基本选择器 : 3.层次选择器 : 4.过滤选择器 : 4.1 基础过滤选择器 4.2 内容过滤选择…
阅读更多...
精益求精：如何在 React 项目中巧妙运用 Redux 并优化项目结构

精益求精：如何在 React 项目中巧妙运用 Redux 并优化项目结构

在前端开发中&#xff0c;React 和 Redux 已经成为构建可扩展、高效的应用程序的首选工具。本文将向您介绍如何在 React 项目中使用 Redux 并精心划分项目结构&#xff0c;以确保代码的可维护性和可扩展性。 第一步&#xff1a;安装 Redux 首先&#xff0c;确保您的项目已经集…
阅读更多...
Vue中ElementUI结合transform使用时，发现弹框定位不准确问题

Vue中ElementUI结合transform使用时，发现弹框定位不准确问题

在近期开发中&#xff0c;需要将1920*1080放到更大像素大屏上演示&#xff0c;所以需要使用到transform来对页面进行缩放&#xff0c;但是此时发现弹框定位出错问题&#xff0c;无法准备定位到实际位置。 查看element-ui官方文档无果后&#xff0c;打算更换新的框架进行开发&am…
阅读更多...
Java升级JDK17（更高版本同理）,修改maven

Java升级JDK17（更高版本同理）,修改maven

记住三个网址就行&#xff1a;下面这个是oracle的 Java Platform, Standard Edition 17 ReferenceImplementations https://www.oracle.com/java/technologies/downloads/#jdk17-windows 另外一个 redhat旗下的&#xff1a;这个是开源的&#xff08;推荐这个&#xff01;&am…
阅读更多...
国产系统下开发QT程序总结

国产系统下开发QT程序总结

国产系统下开发QT程序总结 1. 国产系统简介 开发国产系统客户端的过程中&#xff0c;会出现兼容性问题。以下介绍Kylin和UOS环境下开发QT程序&#xff0c; 首先麒麟和统信这两个系统基于Ubuntu开发的。所以在Ubuntu开发理论上在国产系统上也能运行。芯片架构又分为amd,arm,mi…
阅读更多...
pythonapi接口怎么对接？

pythonapi接口怎么对接？

Python API接口对接是使用Python语言开发应用程序时&#xff0c;与外部API接口进行交互的一种方式。API&#xff08;应用程序接口&#xff09;是一种定义了程序或系统如何与另一个程序或系统进行交互的协议。通过使用Python API接口&#xff0c;可以轻松地访问和操作外部API提供…
阅读更多...
飞凌嵌入式受邀参加「RISC-V芯片应用交流会」并发表主题演讲

飞凌嵌入式受邀参加「RISC-V芯片应用交流会」并发表主题演讲

8月23日下午&#xff0c;在第三届RISC-V中国峰会现场&#xff0c;由赛昉科技主办的「RISC-V芯片应用交流会」吸引了诸多行业伙伴和专家到场参与。此次会议旨在分享赛昉科技高性能RISC-V芯片的软件生态、应用产品、解决方案等全面进展&#xff0c;共同探讨RISC-V芯片的未来发展和…
阅读更多...
Git 删除已经合并的本地分支

Git 删除已经合并的本地分支

在使用 Git 的开发流程中&#xff0c;经常会创建很多的 Git 分支&#xff0c;包括功能分支&#xff08;features/*&#xff09;、发布分支&#xff08;release/*&#xff09;和 hotfix 分支&#xff08;hotfix/*&#xff09;。在开发了一段时间之后&#xff0c;本地就会有出现很…
阅读更多...
javaee spring 自动注入，如果满足条件的类有多个如何区别

javaee spring 自动注入，如果满足条件的类有多个如何区别

如图IDrinkDao有两个实现类 方法一 方法二 Resource(name“对象名”) Resource(name"oracleDrinkDao") private IDrinkDao drinkDao;
阅读更多...
Java --- 异常处理

Java --- 异常处理

目录 一、什么是异常 二、异常抛出机制 三、如何对待异常 四、 Java异常体系 4.1、Throwable 4.2、Error 4.2、Exception 4.2.1、编译时异常 4.2.2、运行时期异常 五、异常处理 5.1、捕获异常&#xff08;try-catch&#xff09; 5.1.2、catch中异常处理方式 …
阅读更多...
你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢？

你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢？

一、什么是SPA SPA&#xff08;single-page application&#xff09;&#xff0c;翻译过来就是单页应用SPA是一种网络应用程序或网站的模型&#xff0c;它通过动态重写当前页面来与用户交互&#xff0c;这种方法避免了页面之间切换打断用户体验在单页应用中&#xff0c;所有必…
阅读更多...
TCP的三次握手 四次挥手以及TCP的11种状态

TCP的三次握手 四次挥手以及TCP的11种状态

三次握手流程&#xff1a; 客户端给服务端发送数据时&#xff0c;数据包中带有一个头&#xff0c;这个头就是前几十个字节&#xff0c;就是下面这张图。从源端口号&#xff0c;目的端口号&#xff0c;一直到序列号&#xff0c;直到Options。第一个包会将这前十几个字节中的SYN置…
阅读更多...
12. 完整模型训练套路

12. 完整模型训练套路

12.1 CIFAR 10 model 网络模型 ① 下面用 CIFAR 10 model网络来完成分类问题&#xff0c;网络模型如下图所示。 12.2 DataLoader加载数据集 import torchvision from torch import nn from torch.utils.data import DataLoader# 准备数据集 train_data torchvision.dataset…
阅读更多...
C#，《小白学程序》第二课：数组与排序

C#，《小白学程序》第二课：数组与排序

1 文本格式 /// <summary> /// 《小白学程序》第二课&#xff1a;数组与排序 /// </summary> /// <param name"sender"></param> /// <param name"e"></param> private void button2_Click(object sender, EventArgs …
阅读更多...
RT-Thread内核学习

RT-Thread内核学习

内核框架 内核是操作系统最基础也是最重要的部分&#xff0c;内核处于硬件层之上&#xff0c;内核部分包括内核库、实时内核实现。 内核库是为了保证内核能够独立运行的一套小型的类似C库的函数实现子集。这部分根据编译器不同自带C库的情况也会不同。 当使用GNU GCC编译器时&…
阅读更多...
Vue.js中，router和route

Vue.js中，router和route

<div class"search">{{$route.params.things}}<van-nav-bar fixed title"商品列表" left-arrow click-left"$router.go(-1)" /><van-searchreadonlyshape"round"background"#ffffff"value"手机"sh…
阅读更多...
Unity Mac踩坑日记

Unity Mac踩坑日记

1、读取外部文件夹使用IO&#xff0c;读取StreamingAsset或者Unity定义文件夹或者服务器文件使用www或者UnityRequest 2、mac下使用www 需要添加前缀&#xff1a;"file://" 3、Mac下的Rider很好用&#xff0c;断点调试也很方便 4、改变文件编码格式&#xff0c;使…
阅读更多...
kotlin如何接收前端传递过来的数据

kotlin如何接收前端传递过来的数据

Kotlin 可以使用 Spring Boot 等框架来接收前端传递过来的数据。 在 Spring Boot 中&#xff0c;你可以使用 RequestBody 注解来将前端传递的 JSON 格式数据转换为相应的 Kotlin 对象。 示例代码&#xff1a; RestController RequestMapping("/api") class UserCo…
阅读更多...
Redis原理剖析

Redis原理剖析

一、Redis简介 Redis是一个开源的&#xff0c;基于网络的&#xff0c;高性能的key-value数据库&#xff0c;弥补了memcached这类key-value存储的不足&#xff0c;在部分场合可以对关系数据库起到很好的补充作用&#xff0c;满足实时的高并发需求。 Redis跟memcached类似&#…
阅读更多...
最新文章

Copyright @ 2022~2023