vue项目中定义全局变量

前言：项目中经常用到用户登录后的token、用户名、用户Id等等，这个时候就需要全局变量或者函数了，这里就简单说一下全局变量。

首先定义全局变量模块文件：

Modular.vue

const userName='xiaoming;
const token='12345678';
  export default
  {
    userName,//用户名字
    token,//用户token
  }

 

第一种方法：在需要使用全局变量的地方引入定义全局变量的模块文件，然后根据模块文件名字获取全局变量参数名：

<template>
    <div>{{ token }}</div>
</template>

<script>
import modular from '../../components/Modular'//引用模块
export default {
 name: 'text',
 data () {
    return {
         token:modular.token,//将全局变量赋值到data里面，也可以直接使用modular.token
        }
    }
}
</script>
<style lang="scss" scoped>

</style>

第二种方法：将全局变量模块文件挂载到Vue.prototype，在程序入口文件main.js操作。

 import modular from './components/Modular'//引用文件
 Vue.prototype.MODULAR = modular//挂载到Vue实例上面

然后我们每次使用就比较简单了，只需要在使用的组件里面的data里面定义变量接收即可。

data () {
    return {
         token:this.MODULAR.token,//直接通过this访问全局变量。
        }
    }

ps:如果使用的地方比较多，建议使用第二种方法之间引用就可以了。