13518219792
这篇文章将为大家详细讲解有关怎么在vue项目中定义全局变量，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
十余年的静乐网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整静乐建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“静乐网站设计”,“静乐网站推广”以来，每个客户项目都认真落实执行。
定义全局变量
原理：使用模块（.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 {
token:global.token,//将全局变量赋值到data里面
}
}
}2、全局变量模块挂载到Vue.prototype上
Global.vue文件同上，在项目入口的main.js里配置：
import global from '../../components/Global' Vue.prototype.GLOBAL = global
挂载之后，在需要引用全局变量的模块处，不需再导入全局变量模块，而是直接用this就可以引用了，如下:
export default {
data () {
return {
token: this.GLOBAL.token,
}
}
}方法一跟方法二的主要区别是，方法二全局只需要导入一次就可以，简单方便。
3、使用vuex定义全局变量
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。因此可以存放着全局量。
// 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项目中定义全局变量就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
