文
章
目
录
章
目
录
你知道vue3全局变量怎么定义吗?本文主要讲解关于Vue3定义全局变量的两种方法相关内容,让我们来一起学习下吧!
第一种
那么好,第一种方法就是利用store来进行定义,首先我们打开store文件夹中的index.js文件。
并且在state中定义一个变量menuState,定义成功后可以在mutation定义一个变量修改事件。setState修改事件中有两个参数,分别是函数名和修改变量值。
然后我们随机打开一个组件,导入vuex中的mapState方法,并且在计算属性中调用此方法,最后我们在mounted方法中利用commit方法修改menuState变量值,测试是否修改成功,setState就是修改事件名,而1就是修改后的变量值,最后我们发现可以调用成功且修改成功。
第二种
那么好,第二种方法首先我们点击main.js文件,加入下列代码
const app=createApp(App)
// 假设这是我们的全局变量
const globalVar = 0;
// 使用 provide 将全局变量作为响应式对象
app.provide('globalVar', globalVar); //便于在js部分可直接用
// 使用 globalProperties 将全局变量附加到 Vue 实例上
app.config.globalProperties.$globalVar = globalVar; //便于在模板部分可直接用
最后就可以直接在组件或者页面中进行调用 页面中是 {{ $globalVar }}
,组件中是this.$globalVar
。
以上就是关于Vue3定义全局变量的两种方法相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!