vue定义全局变量
1、将从服务器请求的数据作为全局变量(全局变量模块挂载到Vue.prototype)在开发中,有时需要将从接口请求到的一些数据当做全局变量,在其他页面多次使用。比如,登录成功后可能需要将用户名,id等信息存起来,便于其他页面展示或使用,将这些信息定义为全局变量是用起来就很方便。举栗子:在login.vue中拿到了用户的一些信息:<script>impor
·
1、将从服务器请求的数据作为全局变量(全局变量模块挂载到Vue.prototype)
在开发中,有时需要将从接口请求到的一些数据当做全局变量,在其他页面多次使用。比如,登录成功后可能需要将用户名,id等信息存起来,便于其他页面展示或使用,将这些信息定义为全局变量是用起来就很方便。
举栗子:
在login.vue中拿到了用户的一些信息:
<script>
import Vue from 'vue' //注意,要在这个页面中引入vue,不然下面的Vue.prototype会报错
export default {
data(){
return{}
},
methods:{
login(){
const userMsg = {
userId : 123,
userName : '张三',
userSite : '上海市浦东新区'
}
Vue.prototype.$userMsg = userMsg; //将全局变量模块挂载到Vue.prototype中
this.$router.push({path:'/index2'});
},
}
}
</script>
在另一个页面使用:
alert(this.$userMsg.userSite); //拿到在login.vue中的用户位置
2、在全局的js中自定义全局变量
命名global.js为全局js,自定义全局变量:
const host = 'localhost:8080';
const token = 'abcdefg123456';
const city = '上海';
export default{
host, //地址
token, //用户token信息
city //位置
}
在vue页面中使用:
<template>
<div>
<button @click="clickMe">点我</button>
</div>
</template>
<script>
import global_msg from '../js/global.js' //注意文件路径,实际路径以项目目录结构为准
export default {
data(){
return{}
},
methods:{
clickMe(){
alert(global_msg.host); //localhost:8080
}
}
}
</script>
3、在main.js中将global.js挂载到Vue.prototype中
将上面例子中的global.js在入口文件main.js中引入并挂载:
import global_msg from './js/global.js' //注意文件路径,实际路径以项目目录结构为准
Vue.prototype.$global_msg = global_msg;
在页面中使用:
<template>
<div>
<button @click="clickMe">点我</button>
</div>
</template>
<script>
export default {
data(){
return{}
},
methods:{
clickMe(){
alert(this.$global_msg.host); //localhost:8080
}
}
}
</script>
更多推荐
所有评论(0)