vue3全局变量怎么定义？

你知道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），学习愉快哦！

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)