vue项目中定义全局变量、函数的几种方法
前言
在项目中，经常会复用一些变量和函数，比如用户的登录token，用户信息等。这时将它们设为全局的就显得很重要了，全局变量和全局函数之间有一些相通之处，它们其实很简单，但是有些人可能还不太了解。简单总结分享一波，希望对你有所帮助。
定义全局变量
原理：使用模块（.js或.vue文件）来管理全局变量，最后使用export暴露出去（最好导出的格式为对象，方便在其他地方调用），当其它地方需要使用时，用import导入该模块
1、使用全局变量专用模块，挂载到main.js文件上面
全局变量模块Global.vue定义如下：
consttoken='12345678';
constuserStatus=false;
exportdefault{
token,//用户token身份
userStatus//用户登录状态
}
模块里的变量用export暴露出去，当其它地方需要使用时，引入模块便可。
使用全局变量：
importglobalfrom'../../components/Global'//引用模块进来
exportdefault{
data(){
return{
token:global.token,//将全局变量赋值到data里面
}
}
}
2、全局变量模块挂载到Vue.prototype上
Global.vue文件同上，在项目入口的main.js里配置：
importglobalfrom'../../components/Global' Vue.prototype.GLOBAL=global
挂载之后，在需要引用全局变量的模块处，不需再导入全局变量模块，而是直接用this就可以引用了，如下:
exportdefault{
data(){
return{
token:this.GLOBAL.token,
}
}
}
方法一跟方法二的主要区别是，方法二全局只需要导入一次就可以，简单方便。
3、使用vuex定义全局变量
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。因此可以存放着全局量。
//index.js文件里定义vuex
importstatefrom'./state'
exportdefaultnewVuex.Store({
actions,
getters,
mutations,
state,
})
//state.js里面存放全局变量，并且暴露出去
conststate={
token：'12345678',
language:'en',
}
exportdefaultstate
使用的时候，在需要引用全局变量的模块处直接使用this.$store调用
exportdefault{
methods:{
getInternation(){
if(this.$store.state.language==='en'){
this.internation=2
}elseif(this.$store.state.language==='zh_CN'){
this.internation=1
}
}
}
}
因为Vuex有点繁琐，有点杀鸡用牛刀的感觉。因此认为并没有必要使用它。上面只是简单的使用，如果想要具体了解使用方式，可以去查阅资料具体掌握。
定义全局函数
原理：在main.js里面通过Vue.prototype将函数挂载到Vue实例上面，通过this.函数名，来运行函数。
1、在main.js文件直接定义方法
简单的函数可以直接写在main.js文件里定义。
//将方法挂载到vue原型上
Vue.prototype.changeData=function(){
alert('执行成功');
}
使用的时候组件里直接调用。
//直接通过this运行函数，这里this是vue实例对象 this.changeData();
2、使用全局函数专用模块，挂载到main.js上面
base.js文件，文件位置可以放在跟main.js同一级，方便引用（这点可以依据个人习惯决定）。
exports.install=function(Vue,options){
Vue.prototype.changeData=function(){
alert('执行成功');
};
};
main.js引入并使用。
importbasefrom'./base' Vue.use(base);
所有的组件里就可以调用该函数。
this.changeData();
结语
以上是vue中全局变量和全局函数使用的全部内容。希望总结的东西对你有所帮组。还不太了解的可以多看几遍，大家加油！！！也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。