Vue3.0中配置公共数据并完成axios网络请求工具的全局配置

在vue3.0中，我们不能通过this在setup函数中来访问组件实例化对象，然而vue3.0就是提倡使用setup钩子来写数据。

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

globalProperties和getCurrentInstance的使用：

在main.js文件中通过globalProperties配置公共数据：

import { createApp } from 'vue'

import App from './App.vue'

const app=createApp(App)//app为我们得到的Vue实例化对象

//使用globalProperties：

app.config.globalProperties.$***="公共数据"//这时这个公共属性就配置好了

app.mount('#app')//组件挂载到页面

在其它组件中通过getCurrentInstance使用数据：

<script setup>

//首先导入getCurrentInstance这个API

import { getCurrentInstance} from "vue";

let obj=getCurrentInstance() //getCurrentInstance()获取当前组件实例对象

let proxy=obj.proxy//当前组件的实例对象的proxy属性为一个对象其中存放的就是公共数据

//proxy.$***就可以取出公共数据

</script>

注意：getCurrentInstance()只能在组合式API中使用才能得到当前组件的实例化对象。

以上就是公共数据的配置和使用。

axios网络请求工具的全局配置

1、首先在main.js文件中引入axios，这里需要我们npm i axios下载包到项目中。然后将axios方法添加为公共属性，在每个组件中就可以直接使用，不用再每个组件中再重复import导入axios；并同时配置AJAX请求时的公共网址

import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios"//导入axios包
const app=createApp(App)

//配置公共网址
axios.defaults.baseURL="http://127.0.0.1:5173/api"
//添加为公共属性
app.config.globalProperties.$axios=axios

app.mount('#app')

2、在组件中做网络请求时，通过getCurrentInstance()获得$axios这个方法

<script setup>
  import { getCurrentInstance,onMounted } from "vue";
  //解构赋值获得proxy对象，$axios就在其中
  let {proxy}=getCurrentInstance()
  //这时可以网络请求了，
   onMounted(async ()=>{
    let res = await proxy.$axios("/ajax")
    //这里实际请求的网址为：http://127.0.0.1:5173/api/ajax
    console.log(res);//得到后端ajax这个接口返回的数据
 })

3、需要做网络代理，我们通过egg框架启动的服务器端口号为7001，而利用vite启动的项目端口为5173，如果直接去请求7001下的数据会存在跨域问题。因此我们需要通过配置服务器代理，请求当前5173服务器，让我们的后端服务器去帮我们请求7001下的数据，服务器端请求数据不会造成跨域问题。

在vite.config.js文件中：

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

如果是在在webpack环境下的项目

在vue.config.js中：

module.exports={
   lintOnSave:false,
   devServer:{
// port:"**",//默认可以不写
// host:"localhost",//默认可以不写
       proxy:{
           "/":{
               target:"http://127.0.0.1:7001",
               changeOrigin:true,
               pathRewrite:{"^/":""}
           }
       }
   }
}

Vue3.0中配置公共数据并完成axios网络请求工具的全局配置

axios网络请求工具的全局配置

猜你喜欢