vue3中使用vuex和vue-router的详细步骤
作者：是张鱼小丸子鸭
这篇文章主要介绍了vue3中使用vuex和vue-router的步骤，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vuex
首先，讲解一下vuex，v2和v3在vuex的使用上一样，差别主要是在版本上，vue2中的vuex的版本必须是4版本以下，而v3的vuex的版本必须是4版本及以上
安装
cnpm i vuex@4 --save
使用步骤
src中先创建一个store文件夹，文件夹中创建一个index.js文件
index.js导入vuex中需要使用的依赖包createStore（）
createStore创建一个vuex的对象抛出即可
main.js中直接导入这个对象即可
index.js文件
//1. 导入依赖
//导入vuex的函数内容
import {createStore} from "vuex";
//调用函数进行配置
const store = createStore({
state:{
num:100,
},
mutations:{
plus(state){
state.num++;
}
},
getters:{},
actions:{},
modules:{},//分模块
// plugins:[],
})
//抛出对象的内容信息
export default store;main.js文件
//导入vuex对象 const app = createApp(App); //引入vuex的操作信息 import store from "./store/index"; app.use(store);
组件中使用vuex
<template>
<div>
<button @click="plus">num++</button>
{{$store.state.num}}
</div>
</template>
<script>
import {useStore} from 'vuex'
export default {
setup() {
const store=useStore()
const plus=()=>{
store.commit('plus')
}
return {plus}
},
}
</script>vue-router
安装
cnpm i vue-router@4 --save
基本配置
src中创建一个文件夹router，router中新建一个index.js
index.js中导入创建路由对象的api createRouter，抛出对象
main.js中导入路由对象，挂载在app中去
index.js
import {createRouter, createWebHistory} from 'vue-router'
const routes = [
{
name: 'home',
path: '/',
component: () => import('../views/Home.vue')
},
{
name: 'login',
path: '/log',
component: () => import('../views/Login.vue')
}
];
const router = createRouter({
history: createWebHistory(),
routes
})
export default routermain.js
import router from "./router/index"; app.use(router);
vue3中路由的使用
<template>
<div>
<h3>主页面Home</h3>
<button @click="goMy">My</button>
</div>
</template>
<script>
import {useRouter} from "vue-router"
export default {
setup(){
const router = useRouter();
const goMy = ()=>{
router.push("/my?id=100");
}
return {
goMy
}
}
}
</script>useRoute
<template>
<div>
<h3>个人中心</h3>
</div>
</template>
<script>
import {useRoute} from "vue-router"
export default {
setup(){
const route = useRoute();
console.log(route);
let {query} = route;
console.log(query);
}
}
</script>axios的安装配置
安装
cnpm i axios --save
main.js
import axios from "axios";
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(store).use(router).mount('#app')在src中创建一个pubilc文件夹，然后创建一个index.js文件，文件中配置
//导入axios
import axios from "axios";
//创建对象相关的信息
const Server = axios.create({
baseURL:"",
timeout:5000,
})
//配置前置拦截器或者后置拦截器
Server.interceptors.request.use((confirm)=>{
return config;
},error=>Promise.reject(error));
//相应拦截器，数据返回，到达客户端之前触发。
Server.interceptors.response.use((response)=>{
return response;
},error=>Promise.reject(error))
export default Server;vue3自定义指令
非setup语法糖中，自定义指令的作用跟vue2中的作用差不多，然后语法糖中的话，可以定义一个v开头的函数对象，当成自定义指令的作用。
分为全局自定义指令局部自定自定义
bind inserted() update() componentUpdated() unbind()
自定义指令生命周期函数变化
- created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
- bind → beforeMount
- inserted → mounted
- beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
- update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
- componentUpdated → updated
- beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
- unbind -> unmounted
- el ,当前元素， binding 传递的数据
全局自定义指令
main.js
app.directive('focus',{
mounted(el,binding){
console.log(el,binding);
el.focus()
el.value=binding.value
}
})组件中使用全局自定义指令
<template>
<div>
<input type="text" v-focus:change.native="123123" placeholder="输入内容"/>
</div>
</template>局部自定义指令
在局部自定义指令中给他一个拖拽事件
<template>
<div>
<div class="box" v-drag></div>
</div>
</template>
<script>
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
export default {
directives: {
drag: {
mounted(el, binding) {
//鼠标按下
el.onmousedown = function () {
var event = event || window.event;
//获取坐标值
var x1 = event.clientX;
var y1 = event.clientY;
//还需要获取偏移值
var L = el.offsetLeft;
var T = el.offsetTop;
console.log(x1, y1, L, T);
//鼠标移动
document.onmousemove = function (event) {
//获取坐标值
var x2 = event.clientX;
var y2 = event.clientY;
var l = x2 - x1 + L;
var maxW = document.documentElement.clientWidth - el.clientWidth;
if(l<=0){
l = 0;
}
if(l>=maxW){
l = maxW;
}
//改变盒子的偏移值
el.style.left = l+ "px";
el.style.top = y2 - y1 + T + "px";
};
//异动结束后，鼠标松开的时候触发的操作
document.onmouseup = function(){
document.onmousemove = null;
}
};
},
},
},
setup() {}
}
</script>
<style scoped>
.box{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>vue3中的插槽使用
slot理解
我们经常会有封装组件的需求，组件需要的往往不只有数据，一般我们通过组件通信传递的都是我们的基本数据类型或者是引用数据类型，如果我们想要传递一些标签属性，那么我们就要使用插槽来进行实现
具名插槽就是给slot标签添加name=""属性，使用是在template标签中用#name绑定使用
作用域插槽就是使用插槽传递数据，传递的数据直接绑在slot身上。使用是在template标签上#name="scope",传递的值就在scope里面
#号是v-slot指令的缩写
简单插槽
到此这篇关于vue3中使用vuex和vue-router的文章就介绍到这了,更多相关vue3使用vuex和vue-router内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！