public data configuration

Because when v2 uses public configuration, it is generally bound to the prototype, regardless of whether it is used or not, it is on the this chain of each component. This design is not very friendly. v3 provides a special way of public data configuration: globalProperties , getCurrentInstance

globalProperties

In vue2 we write public data directly into Vue.prototype, for example:

The public data configuration of axios in vue2 is event proxy http://t.csdn.cn/Pq4FE

So the globalProperties function is provided in vue3

Usage: const app=createApp(App)
app.config.globalProperties.$test="This is public data" ($test is the custom property name) app.mount('#app')

getCurrentInstance

1. getCurrentInstance() obtains the current component instance object 2. The proxy
object deconstructed from the current component instance object contains $test (custom attribute name) 3. Note that this function should be used in component hooks, not in ordinary functions used in

case:

main.js file

//main.js
import { createApp } from 'vue'
import App from './App.vue'

const app=createApp(App)
app.config.globalProperties.$test="这是公共数据" 

app.mount('#app')

components

<template>
	<div>
	</div>
</template>

<script setup>
	import {
		reactive,
		onBeforeMount,
		getCurrentInstance,
	} from "vue"



	const {
		proxy
	} = getCurrentInstance(); //此处解构必须用proxy接收,正常使用:语法糖环境默认为setup钩子
	console.log(proxy.$test, 111)

	onBeforeMount(() => {
		console.log(getCurrentInstance().proxy.$test, 222) //正常使用:标准钩子
	})

</script>

<style scoped>

</style>

Console prints:

Indicates that the public data has been successfully received

Vue3 network proxy configuration axios

main.js

1. Introduce axios

2. Configure the basic path of axios (mainly to set the API

3. Then configure public data to import axios

import { createApp } from 'vue'
import App from './App.vue'

import axios from "axios"

axios.defaults.baseURL="http://127.0.0.1:5173/api1" //设置axios的基本路径+自己设定的api

const app=createApp(App)
app.config.globalProperties.$axios=axios //将axios设置为公共数据，这样在使用时就不必在每个组件文件中引用


app.mount('#app')

Proxy configuration proxy in config.js

If it is in the invite environment, it is

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  
  server: {
  		
  		proxy: {
  			'/api1': {
  				target: 'http://127.0.0.1:7001', // 代理的目标地址，我这里是用的egg的地址
  				rewrite: (path) => path.replace(/^\/api1/, '/'), // 路径重写
  				changeOrigin: true,
  				// secure: true, // target是否https接口
  				// ws: true, // target是否代理websockets               
  			}
  		}
  	},
	
})

If it is a webpack environment, you can refer to my axios configuration in vue2, which is basically the same http://t.csdn.cn/yLlUH

Component code app.vue

<template>
	<div>
       <div v-for="el in arr1">
		   <h1>菜名：{
    
    {el.title}}--价格：{
    
    {el.price}}元--数量：{
    
    {el.count}}</h1>
	   </div>

	</div>
</template>

<script setup>
	import {ref,
		reactive,
		onBeforeMount,
		getCurrentInstance,

	} from "vue"

	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装

	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
  
  	 onBeforeMount( async()=>{
  	 	let res=await proxy.$axios('/test') //使用公共配置的$axios进行axios请求
  	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
  	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
  	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		 console.log(arr1)		 
  	 })
  


</script>

<style scoped>

</style>

Known backend data is

Interface effect and console printing:

Indicates that the data from the backend has been successfully requested and displayed on the interface