vue2.0如何设置全局变量

Question

比如资源服务器的host，后台api的host，微信第三方的host。这些host不能挨个去代码里面写吧。
其实，我就是想知道vue如何设置全局变量。总感觉放到window，localstorage，sessionstorage不太正规。

Answer 1

webpack 有global关键字
比如在一个a.js文件中定义全局变量：

global.COURSES = 'xxxxx'

在入口的main.js

import './a'

就可以，别的js不需要import也能用到COURSES

Answer 2

放到vuex的store里？

Answer 3

或者是因为个人的强迫症，还是在全局Vue.use了一个自定义插件。

main.js如下：

// 重写了vue-bus
import VueBus from './component/vue-bus.js'
Vue.use(VueBus);

vue-bus.js如下：

(function(global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.VueBus = factory());
}(this, (function() { 'use strict';

  function VueBus(Vue) {

    var bus = new Vue();

    bus.data = {
        host: "local.vue.com"
    }

    Object.defineProperty(Vue.prototype, '$bus', {
      get: function() {
        return bus;
      }
    });
  }

  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(VueBus);
  }

  return VueBus;

})));

Answer 4

连vue对象都是放在window下面，怎么换成你的就不正规了呢？

Answer 5

直接写一个config.vue放配置参数，需要用到的地方import进来。
或者用vuex。

Answer 6

单有一个模块维护这些常量不就可以了，其他模块依赖这个模块。

Answer 7

简单需求的话，写在一个模块中就可以了，用的时候require或者import进来就可以了

Answer 8

建议你用vuex，因为这相当于数据仓库，而且可以是响应式的数据

Answer 9

有很多种方法，下面这种方式比较合理，也是我平时用的方法：
写一个js文件，将静态数据都写进去。

// config.js

const host = '//a.com/api/xx';

export default {
  host
};

然后在需要用的文件中使用一下方法引入:

import { host } form './config.js'

还有其他方法可以实现：

• 存到vuex中

• 使用props的方式传入
  当时由于host是静态数据，是不会变化的，所以，使用这两个方法有点浪费，因为vuex, props都是需要设置监听的。

Answer 10

存到VUEX的store里面就好了

Answer 11

//声明全局变量
import Vue from 'vue'
Vue.prototype.$library = {

myfunc: function(){...},
myclass: class {...}

}
//组件内使用
this.$library.myfunc();
let instant = new this.$library.myclass();

Answer 12

在assets文件夹新建文件utils.js:

export default{
  install(Vue,options)
  {
    // 保存全局变量接口网址用于测试
    Vue.prototype.apiUrl = 'http://xxx/xx.php'
  }
}

在main.js文件里引入utils.js

// 引入存储全局变量的插件`util.js`
import util from './assets/util'

然后就能在vue实例里调用this.apiUrl了