vue3vue2 全局变量的挂载

vue2.x挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载,然后通过this.$xxx来获取挂载到全局的变量或者方法
在vue3.x这种方法显然是不行了,vue3中在setup里面我们都获取不到this,官方提供了另一种方法来让我们使用,(在vue3中其实更推荐依赖注入的方式)
上代码

import { createApp } from 'vue'
import App from './App'
import store from '@store'
import router from '@router/index'


const app = createApp(App)
app.config.globalProperties.$globalData = '谢谢谢谢谢寻寻寻寻撒大所多'
app.use(router)
    .use(store)
    .use(elementPlusUI)
    .mount('#app')

 在页面中获取也很简单,只需要从vue引入一个方法即可,不能在页面中使用this获取

 getCurrentInstance只能在setup生命周期钩子中使用。 

import { defineComponent, getCurrentInstance, onMounted } from "vue"
export default defineComponent({
	onMounted(() => {
         //全局调用方法1
        const { proxy } = getCurrentInstance();
        console.log(proxy)
        console.log(proxy.$axios)
        return { proxy }
 
        //全局调用方法2
        const instence = getCurrentInstance()
         const ins = instence.appContext.config.globalProperties
        console.log(ins.$axios,typeof(ins.$axios))
    })
})

proxy打印出来是看不到自己定义的全局变量的,不晓得为什么,但是可以直接用proxy调用使用。

第二种通过instence.appContext.config.globalProperties,是可以打印出来看的到。

目前这两种使用方式暂时没发现还有什么区别

猜你喜欢

转载自blog.csdn.net/m0_57033755/article/details/130617292
今日推荐