vue3中怎么实现定义全局变量
这篇文章主要介绍“vue3中怎么实现定义全局变量”，在日常操作中，相信很多人在vue3中怎么实现定义全局变量问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3中怎么实现定义全局变量”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
vue3定义全局变量
在vue2中，我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量，然后通过this.$xxx来获取全局变量。
但是在vue3中，这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的，因此按照官方文档我们使用下面方法来定义全局变量：
首先在main.js里写一个我们要定义的全局变量，比如一个系统id吧
app.config.globalProperties.$systemId = "10"
现在在页面里需要使用这个变量，只需要从vue中引入getCurrentInstance即可，注意不能在页面中使用this.
import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10vue3全局变量app.config.globalProperties的使用
globalProperties
类型：[key: string]: any
默认：undefined
用法
添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。
这可以代替 Vue 2.x Vue.prototype 扩展：
// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}当我们想在组件内调用http时需要使用getCurrentInstance()来获取。
import { getCurrentInstance, onMounted } from "vue";
export default {
setup( ) {
const { ctx } = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
onMounted(() => {
console.log(ctx, "ctx");
ctx.http();
});
},
};getCurrentInstance代表上下文，即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段，如果将项目打包放到生产服务器上运行，就会出错，ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx，代码参考如下。
import { getCurrentInstance } from 'vue'
export default ({
name: '',
setup(){
const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效
onMounted(() => {
console.log(proxy, "proxy");
proxy.http();
});
}
})到此，关于“vue3中怎么实现定义全局变量”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论