vue3中使用vuex和vue-router的詳細步驟

更新時間：2022年12月06日 09:47:52 作者：是張魚小丸子鴨

這篇文章主要介紹了vue3中使用vuex和vue-router的步驟，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

vuex

首先，講解一下vuex，v2和v3在vuex的使用上一樣，差別主要是在版本上，vue2中的vuex的版本必須是4版本以下，而v3的vuex的版本必須是4版本及以上

安裝

cnpm  i  vuex@4 --save

使用步驟

src中先創(chuàng)建一個store文件夾，文件夾中創(chuàng)建一個index.js文件

index.js導(dǎo)入vuex中需要使用的依賴包createStore（）

createStore創(chuàng)建一個vuex的對象拋出即可

main.js中直接導(dǎo)入這個對象即可

index.js文件

//1. 導(dǎo)入依賴
//導(dǎo)入vuex的函數(shù)內(nèi)容
import {createStore} from "vuex";
 
//調(diào)用函數(shù)進行配置
const store = createStore({
    state:{
        num:100,
    },
    mutations:{
        plus(state){
            state.num++;
        }
    },
    getters:{},
    actions:{},
    modules:{},//分模塊
    // plugins:[],
})
 
//拋出對象的內(nèi)容信息
export default store;

main.js文件

//導(dǎo)入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中創(chuàng)建一個文件夾router，router中新建一個index.js

index.js中導(dǎo)入創(chuàng)建路由對象的api createRouter，拋出對象

main.js中導(dǎo)入路由對象，掛載在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 router

main.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中創(chuàng)建一個pubilc文件夾，然后創(chuàng)建一個index.js文件，文件中配置

//導(dǎo)入axios
import axios from "axios";
 
//創(chuàng)建對象相關(guān)的信息
const Server = axios.create({
    baseURL:"",
    timeout:5000,
})
 
//配置前置攔截器或者后置攔截器
Server.interceptors.request.use((confirm)=>{
    return config;
},error=>Promise.reject(error));
 
 
//相應(yīng)攔截器，數(shù)據(jù)返回，到達客戶端之前觸發(fā)。
Server.interceptors.response.use((response)=>{
    return response;
},error=>Promise.reject(error))
 
 
export default Server;

vue3自定義指令

非setup語法糖中，自定義指令的作用跟vue2中的作用差不多，然后語法糖中的話，可以定義一個v開頭的函數(shù)對象，當(dāng)成自定義指令的作用。

分為全局自定義指令局部自定自定義

bind inserted() update() componentUpdated() unbind()

自定義指令生命周期函數(shù)變化

created - 新增！在元素的 attribute 或事件監(jiān)聽器被應(yīng)用之前調(diào)用。
bind → beforeMount
inserted → mounted
beforeUpdate：新增！在元素本身被更新之前調(diào)用，與組件的生命周期鉤子十分相似。
update → 移除！該鉤子與 updated 有太多相似之處，因此它是多余的。請改用 updated。
componentUpdated → updated
beforeUnmount：新增！與組件的生命周期鉤子類似，它將在元素被卸載之前調(diào)用。
unbind -> unmounted
el ,當(dāng)前元素， binding 傳遞的數(shù)據(jù)

全局自定義指令

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="輸入內(nèi)容"/>
  </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) {
        //鼠標(biāo)按下
        el.onmousedown = function () {
          var event = event || window.event;
          //獲取坐標(biāo)值
          var x1 = event.clientX;
          var y1 = event.clientY;
 
          //還需要獲取偏移值
          var L = el.offsetLeft;
          var T = el.offsetTop;
 
          console.log(x1, y1, L, T);
 
          //鼠標(biāo)移動
          document.onmousemove = function (event) {
            //獲取坐標(biāo)值
            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";
          };
 
          //異動結(jié)束后，鼠標(biāo)松開的時候觸發(fā)的操作
          document.onmouseup = function(){
            document.onmousemove = null;
          }
        };
      },
    },
  },
  setup() {}
}
</script>
 
<style  scoped>
.box{
    width: 100px;
    height: 100px;
   background-color: lightcoral;
}
</style>