今天在用vue做一个单页面地图的时候,关于vue全局变量产生了疑问,经过一番思考和查找资料总结了接下来几个方法。
1.直接使用window对象
window.map=map;
2.使用webpack的全局变量
webpack 有global关键字比如在一个a.js文件中定义全局变量:
global.COURSES = 'xxxxx';
在入口的main.js
import './a';
就可以,别的js不需要import也能用到COURSES
3.编写特定模块管理全局变量
// conmmon.vue
const host = '//top/mid/xx';
export default {
host
};
然后在需要用的文件中使用一下方法引入:
import { host } form './conmmon';
4.全局变量模块挂载到Vue.prototype 里
// main.js
import global_ from './components/tool/Global';
Vue.prototype.GLOBAL = global_;
//需要引用的模块处
<script>
export default {
data () {
return {
getColor: this.GLOBAL.getRandColor
}
</script>
4.VUEX
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,因此可以存放着全局变量。
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex
Vuex文档