1. 模块引入

新建一个特定模块,用户组织管理全局变量和全局方法,然后在需要用到的地方引入该模块即可。

新建global.js,添加全局方法和变量

const gbs = {
//全局设置
// host: 'http://test.lion1ou.win', //接口根地址。 测试
host: 'http://192.168.8.47:8090', //接口根地址。本地
db_prefix: 'lion_test_', //本地存储的key
};
//回调
const cbs = {
testFn(e) {
alert(e);
// console.log('testFn', e);
}
};
export { cbs, gbs }

在需要使用的模块引入使用即可。

<script>
import {
gbs,
cbs
} from '@/config/global.js';
export default {
name: '',
data() {
return {
host : gbs.host,
}
},
methods: {

},
mounted() {
console.log(gbs.host);
cbs.testFn('test');
}
}
</script>

2. 挂载到Vue.prototype上

在程序入口,main.js里添加如下代码:

//注入全局方法和变量
import * as global_ from '@/config/global.js';
Vue.prototype._global = global_;

挂载之后,在需要引用全局量的模块处,不需再导入全局量模块,直接用this就可以引用了,如下:

<script>
export default {
name: '',
data() {
return {
host : this._global.gbs.host,
}
},
methods: {

},
mounted() {
console.log(this._global.gbs.host);
this._global.cbs.testFn('test');
}
}
</script>

3. 使用Vuex

官方文档

本人博文-VueJS之Vuex使用指南

4. 全局变量可以用localStrage/sessionStrage

可以参见本人博文-HTML5之本地存储

转载请标注原文地址