vue项⽬中定义全局变量、函数的⼏种⽅法
前⾔
在项⽬中，经常会复⽤⼀些变量和函数，⽐如⽤户的登录token，⽤户信息等。这时将它们设为全局的就显得很重要了，全局变量和全局函数之间有⼀些相通之处，它们其实很简单，但是有些⼈可能还不太了解。简单总结分享⼀波，希望对你有所帮助。
定义全局变量
原理：使⽤模块（.js或.vue⽂件）来管理全局变量，最后使⽤export暴露出去（最好导出的格式为对象，⽅便在其他地⽅调⽤），当其它地⽅需要使⽤时，⽤import导⼊该模块
1、使⽤全局变量专⽤模块，挂载到main.js⽂件上⾯
全局变量模块Global.vue定义如下：
const token='12345678';
const userStatus=false;
export default {
token, // ⽤户token⾝份
userStatus // ⽤户登录状态
}
模块⾥的变量⽤export暴露出去，当其它地⽅需要使⽤时，引⼊模块便可。
使⽤全局变量：
import global from '../../components/Global'//引⽤模块进来
export default {
data () {
return {
ken,//将全局变量赋值到data⾥⾯
}
}
}
2、全局变量模块挂载到Vue.prototype上
Global.vue⽂件同上，在项⽬⼊⼝的main.js⾥配置：
import global from '../../components/Global'
Vue.prototype.GLOBAL = global
挂载之后，在需要引⽤全局变量的模块处，不需再导⼊全局变量模块，⽽是直接⽤this就可以引⽤了，如下:
export default {
data () {
return {
token: ken,
}
}
}
⽅法⼀跟⽅法⼆的主要区别是，⽅法⼆全局只需要导⼊⼀次就可以，简单⽅便。
3、使⽤vuex定义全局变量
Vuex是⼀个专为Vue.js应⽤程序开发的状态管理模式。它采⽤集中式存储管理应⽤的所有组件的状态。因此可以存放着全局量。
函数prototype// index.js⽂件⾥定义vuex
import state from './state'
export default new Vuex.Store({
actions,
getters,
mutations,
state,
})
// state.js⾥⾯存放全局变量，并且暴露出去
const state = {
token：'12345678',
language: 'en',
}
export default state
使⽤的时候，在需要引⽤全局变量的模块处直接使⽤this.$store调⽤
export default {
methods: {
getInternation() {
if (this.$store.state.language === 'en') {
this.internation = 2
} else if (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引⼊并使⽤。
import base from './base'
Vue.use(base);
所有的组件⾥就可以调⽤该函数。
this.changeData();
结语
以上是vue中全局变量和全局函数使⽤的全部内容。希望总结的东西对你有所帮组。还不太了解的可以多看⼏遍，⼤家加
油也希望⼤家多多⽀持。