vue定义一个全局变量,vue全局声明变量

vue定义一个全局变量,vue全局声明变量,vue项目中定义全局变量、函数的几种方法

本文主要介绍了在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中全局变量和全局函数使用的内容。希望总结对你有帮助。如果不是很了解,可以多看几遍。大家加油!也希望大家能支持我们。

vue定义一个全局变量,vue全局声明变量