本文主要介绍了在vue项目中定义全局变量和函数的几种方法。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。

前言

在项目中，一些变量和函数经常被重用，如用户登录令牌、用户信息等。这个时候，让他们全球化就很重要了。全局变量和全局函数有一些相似之处。它们其实很简单，只是有些人可能不太了解。简单总结分享一波，希望对你有帮助。

定义全局变量

原理：使用模块(。js或者。vue文件)来管理全局变量。最后用导出来暴露它们(导出最好的格式是object，方便在其他地方调用)。其他地方需要的时候，用import导入模块。

1、使用全局变量专用模块，挂载到main.js文件上面

全局变量模块Global.vue定义如下：

const token=' 12345678

const userStatus=false

导出默认值{

令牌，//用户的令牌标识

用户状态//用户登录状态

}

模块中的变量通过export公开，当其他地方需要时，可以引入模块。

使用全局变量：

'导入自'././components/global'//reference模块进来。

导出默认值{

data () {

返回{

Token:global.token，//将全局变量赋给数据

}

}

}

2、全局变量模块挂载到Vue.prototype上

Global.vue文件同上，配置在项目门户的main.js中：

'导入全局自'././组件/全局'

Vue.prototype.GLOBAL=全球

挂载后，不需要在需要引用全局变量的模块处导入全局变量模块，可以用这个直接引用，如下：

导出默认值{

data () {

返回{

令牌：这个。GLOBAL.token

}

}

}

第一种方法和第二种方法的主要区别在于，第二种方法只需要全局导入一次，简单方便。

3、使用vuex定义全局变量

Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中存储来管理应用程序所有组件的状态。因此，可以存储全局数量。

//vuex是在index.js文件中定义的。

从'导入状态。/state

导出默认的新Vuex。商店({

行动，

吸气剂，

突变，

状态，

})

//state.js存储全局变量并公开它们。

常量状态={

令牌：“12345678”，

语言：'恩'，

}

导出默认状态

使用时，调用此。$直接存储在需要引用全局变量的模块中。

导出默认值{

方法：{

getInternation() {

如果(这个。$store.state.language==='en') {

this.internation=2

} else if(这个。$ store . state . language===' zh _ CN '){

this.internation=1

}

}

}

}

因为Vuex有点繁琐，而且感觉像是拿刀杀鸡。所以我觉得没必要用。以上只是简单的使用。想详细了解使用方法，可以参考资料详细掌握。

定义全局函数

原理：在main.js中，通过Vue.prototype在Vue实例上挂载函数，通过这个运行函数。函数名。

1、在main.js文件直接定义方法

简单的函数可以直接在main.js文件中定义。

//在vue原型上安装该方法

vue . prototype . change data=function(){

Alert('成功执行')；

}

使用时，直接在组件中调用。

//直接通过这个运行函数，这里是vue实例对象

this . changedata()；

2.使用全局函数的特殊模块，并将其安装在main.js上

Base.js文件，文件位置可以和main.js放在一个级别，方便参考(这个可以根据个人习惯决定)。

exports.install=function (Vue，选项){

vue . prototype . change data=function(){

Alert('成功执行')；

};

};

Main.js引入并使用。

从'导入基础。/base '

Vue.use(基础)；

这个函数可以在所有组件中调用。

this . changedata()；

结语

这些都是vue中全局变量和全局函数使用的内容。希望总结对你有帮助。如果不是很了解，可以多看几遍。大家加油！也希望大家能支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。