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