vue项目中定义全局变量
前言:项目中经常用到用户登录后的token、用户名、用户Id等等,这个时候就需要全局变量或者函数了,这里就简单说一下全局变量。首先定义全局变量模块文件:Modular.vueconst userName='xiaoming;const token='12345678';export default{userName,//用户名字token,//用户...
·
前言:项目中经常用到用户登录后的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:如果使用的地方比较多,建议使用第二种方法之间引用就可以了。
更多推荐
已为社区贡献4条内容
所有评论(0)