如何在vue项目中定义并使用全局变量和全局函数?

2026-06-10 15:110阅读0评论SEO资源
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计1438个文字,预计阅读时间需要6分钟。

如何在vue项目中定义并使用全局变量和全局函数?

在项目前端,经常有一些函数和变量是需要复用的,例如:

- 网站服务器地址:从后台获取- 用户登录token:用于身份验证- 用户地址信息:存储用户位置

这时,就需要设置全局变量和全局函数。

写在前面:

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波。

定义全局变量

原理:

设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。

全局变量模块文件:

Global.vue文件:

<script> const serverSrc='www.baidu.com'; const token='12345678'; const hasEnter=false; const userSite="中国钓鱼岛"; export default { userSite,//用户地址 token,//用户token身份 serverSrc,//服务器地址 hasEnter,//用户登录状态 } </script>

使用方式1:

在需要的地方引用进全局变量模块文件,然后通过文件里面的变量名字获取全局变量参数值。

阅读全文

本文共计1438个文字,预计阅读时间需要6分钟。

如何在vue项目中定义并使用全局变量和全局函数?

在项目前端,经常有一些函数和变量是需要复用的,例如:

- 网站服务器地址:从后台获取- 用户登录token:用于身份验证- 用户地址信息:存储用户位置

这时,就需要设置全局变量和全局函数。

写在前面:

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波。

定义全局变量

原理:

设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。

全局变量模块文件:

Global.vue文件:

<script> const serverSrc='www.baidu.com'; const token='12345678'; const hasEnter=false; const userSite="中国钓鱼岛"; export default { userSite,//用户地址 token,//用户token身份 serverSrc,//服务器地址 hasEnter,//用户登录状态 } </script>

使用方式1:

在需要的地方引用进全局变量模块文件,然后通过文件里面的变量名字获取全局变量参数值。

阅读全文