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,是可以打印出来看的到。
目前这两种使用方式暂时没发现还有什么区别