vue3中如何实现定义全局变量
更新时间：2022年07月21日 09:55:24 作者：想想就很棒
这篇文章主要介绍了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推荐使用依赖注入：provide和inject。原因：vue/rfcs.
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题
这篇文章主要介绍了解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
watch 是由用户定义的数据监听，当监听的属性发生改变就会触发回调，这项配置在业务中是很常用。在面试时，也是必问知识点，一般会用作和 computed 进行比较。那么本文就来带大家从源码理解 watch 的工作流程，以及依赖收集和深度监听的实现2022-10-10
这篇文章主要介绍了vue this.$toast 失效问题汇总,本文给大家分享完美解决方案，感兴趣的朋友跟随小编一起看看吧2024-03-03
本文给大家介绍了在vue项目中使用svg图标的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-04-04
这篇文章主要为大家介绍了vue使用微软的开发接口Office Web,实现线上文件预览,预览word，excel，pptx，pdf文件,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue中内嵌iframe的src更新页面未刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
浅谈vue中使用编辑器vue-quill-editor踩过的坑
这篇文章主要介绍了浅谈vue中使用编辑器vue-quill-editor踩过的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家介绍了vue运用之vuex持久化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了vue插件v-touch的坑及解决(不能上下滑动)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)
keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,下面这篇文章主要给大家介绍了关于vue使用keep-alive进行组件缓存方法(组件不缓存问题解决)的相关资料,需要的朋友可以参考下2022-09-09
最新评论