在Vue.js中创建一个全局变量

Question

在Vue.js 0.12中,很容易将根组件中的变量一直传递给它的子inherit: true组件:您只需要在需要其父组件数据的任何组件上使用它.

Vue.js 1.0删除了使用的能力inherit: true.可以理解的是,你真的不应该一直在任何地方继承所有东西.

然而,这是从0.12升级到1.0的问题.我有很多组件inherit,只有这样才能baseurl从根组件中获取重要的配置变量.这样的变量肯定应该由任何具有链接的组件知道.

<a href="{{ baseurl }}/page">Link</a>

我可以将配置的prop传递给每个组件,但这看起来多余而且笨重.

<c0 :config="{baseurl: 'example.com'}"></c0>

<c1 :config="config"></c1>

<c2 :config="config"></c2>

<c3 :config="config"></c3>

为所有组件创建全局范围的任何好方法？

Answer 1

这可能不是那里最好的解决方案,但它起作用并且不是太麻烦.我只是设置了一个getter原型方法.

Vue.prototype.$config = function (key) { 
  var config = this.$root.$get('config');

  if (config) {
    return config[key];
  } 

  return '';
}

<a href="{{ $config('baseurl') }}/page">Link</a>

任何组件都可以访问.