Vue3.0 —— 公共数据、网络、路由、数据仓库（Pinia）的配置

一、公共数据的配置

        因为v2使用公共配置时一般绑定在原型上无论是否使用都在每一个组件的this链上,这样的设计不太友好,v3提供了专门公共数据配置的方式: globalProperties getCurrentInstance

        main.js文件中：

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$demo= "hello world"
app.config.globalProperties.variable = 99999999

app.mount('#app')

        在组件中使用：

<script setup>
  import {getCurrentInstance} from "vue"
  let re = getCurrentInstance()

</script>

<template>
  <div>
    <h1>{{re.proxy.$demo}}</h1>
    <h5>{{re.proxy.variable}}</h5>
  </div>
</template>

二、网络配置

        vite脚手架中：

        vite.config.js文件中：

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    // port:"",
    // host
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7001', // 代理的目标地址
        rewrite: (path) => path.replace(/^\/api/, '/'), // 路径重写
        changeOrigin: true,
        // secure: true, // target是否https接口
        // ws: true, // target是否代理websockets               
      }
    }
  }
})

        main.js文件中：

import { createApp } from 'vue'

import App from './App.vue'
import axios from 'axios'
const app = createApp(App)

// 网络配置
axios.defaults.baseURL = "http:..127.0.0.1:5173/api"
app.config.globalProperties.$axios = axios

app.mount('#app')

        在组件中使用：

<script setup>
	import {getCurrentInstance} from "vue"	
    const { proxy } = getCurrentInstance();//注意在组件钩子中获取,不要在事件中
    let fn=()=>{
        proxy.$axios("/test")
    }
</script>

三、路由配置

        1、现在终端输入 npm i axios 下载axios

        然后再main.js中：

import { createApp } from 'vue'

import App from './App.vue'

import router from "./router/index.js"
createApp(App).use(router).mount('#app')

        在路由文件router下配置：

//路由文件
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/home.vue'),
      //独享守卫
    beforeEnter(to,from,next){
        next()
     }
  },

  
]
const router = createRouter({
  history: createWebHistory(),
  routes
})


//全局守卫配置
router.beforeEach((to,from,next)=>{
	//进行业务操作
	next()
})

router.beforeResolve((to,from,next)=>{
    //进行业务操作	
    next()
})

router.afterEach((to,from)=>{
	//进行业务操作
})



export default router

        组件中使用：

import {onBeforeRouteLeave,useRouter,useRoute} from "vue-router"
    let router=useRouter()

	let fn=()=>{
        let route=useRoute()	
	     console.log(route.query)
		router.push({path:"/home",query:{id:123}})
	}
    
    //组件内的守卫钩子
    onBeforeRouteLeave((to,from,next)=>{
		console.log(66666,"离开")
		next()
	})

四、数据仓库pinia的配置

        pinia中文网网址：https://pinia.web3doc.top/

        下载： 

npm install pinia

 在main.js文件中配置：

import { createApp } from 'vue'

import App from './App.vue'

import {createPinia} from "pinia"


createApp(App).use(createPinia()).mount('#app')

在仓库文件中使用：

import {defineStore} from "pinia"
export const useStore = defineStore("组件的名字",{
    state: () => {
        return {
            
        }
    }
})