vue3全局变量怎么定义?

前端 潘老师 2个月前 (12-12) 95 ℃ (0) 扫码查看



你知道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),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12497.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】