vue2.0如何设置全局变量

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

阅读 39.1k
评论
    12 个回答

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

    global.COURSES = 'xxxxx'
    

    在入口的main.js

    import './a'
    

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

      • 9.4k

      放到vuex的store里?

        • 182

        或者是因为个人的强迫症,还是在全局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;
        
        })));
          • 2.8k

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

            • 4
            • 新人请关照

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

              • 8.4k

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

                • 3.5k

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

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

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

                    // config.js
                    
                    const host = '//a.com/api/xx';
                    
                    export default {
                      host
                    };

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

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

                    还有其他方法可以实现:

                    • 存到vuex中

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

                      • 1
                      • 新人请关照

                      存到VUEX的store里面就好了

                        • 4
                        • 新人请关照

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

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

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

                          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

                            撰写回答

                            登录后参与交流、获取后续更新提醒

                            相似问题
                            推荐文章