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

前言

在项目中，常常会复用一些变量和函数，好比用户的登陆token，用户信息等。这时将它们设为全局的就显得很重要了，全局变量和全局函数之间有一些相通之处，它们其实很简单，可是有些人可能还不太了解。简单总结分享一波，但愿对你有所帮助。

定义全局变量

原理：使用模块（.js或.vue文件）来管理全局变量，最后使用export暴露出去 （最好导出的格式为对象，方便在其余地方调用），当其它地方须要使用时，用import导入该模块

一、使用全局变量专用模块，挂载到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里面
        }
    }
}
复制代码

二、全局变量模块挂载到Vue.prototype上

Global.vue文件同上，在项目入口的main.js里配置：

import global from '../../components/Global'
Vue.prototype.GLOBAL = global
复制代码

挂载以后，在须要引用全局变量的模块处，不需再导入全局变量模块，而是直接用this就能够引用了，以下:

export default {
  data () {
    return {
     token: this.GLOBAL.token,
    }
  }
}
复制代码

方法一跟方法二的主要区别是，方法二全局只须要导入一次就能够，简单方便。

三、使用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.函数名，来运行函数。

一、在main.js文件直接定义方法

简单的函数能够直接写在main.js文件里定义。

// 将方法挂载到vue原型上
Vue.prototype.changeData = function (){
  alert('执行成功');
}
复制代码

使用的时候组件里直接调用。

//直接经过this运行函数，这里this是vue实例对象
this.changeData();
复制代码

二、使用全局函数专用模块，挂载到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中全局变量和全局函数使用的所有内容。但愿总结的东西对你有所帮组。还不太了解的能够多看几遍，你们加油！！！

参考文章

• Vue中如何定义全局函数
• 在vue项目中 如何定义全局变量 全局函数