vue项目中定义全局变量 函数的几种方法

定义全局变量

原理：使用模块（.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文件里定义vueximport 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中全局变量和全局函数使用的全部内容。