在 Vue.js 中声明全局变量的最佳方式是什么？

Question

我需要访问每个组件中的 hostname 变量。

把它放在 data 里面是个好主意吗？

我是否理解如果我这样做，我将能够在任何地方调用它 this.hostname ？

原文由 Dmitry Bubnenkov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

警告： 以下答案使用的是 Vue 1.x。 twoWay 数据突变已从 Vue 2.x 中移除（幸运的是！）。

在“全局”变量的情况下——附加到全局对象，即 Web 浏览器中的窗口对象——声明变量的最可靠方法是在全局对象上显式设置它：

 window.hostname = 'foo';

然而，从 Vue 的层次结构（根视图模型和嵌套组件）来看，数据可以向下传递（如果指定了 twoWay 绑定，则可以向上变化）。

For instance if the root viewModel has a hostname data, the value can be bound to a nested component with v-bind directive as v-bind:hostname="hostname" or in short :hostname="hostname" .

在组件内，绑定值可以通过组件的 props 属性访问。

最终数据将被代理到 this.hostname 并且可以在需要时在当前 Vue 实例中使用。

 var theGrandChild = Vue.extend({
  template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3>',
    props: ['foo', 'bar']
});

var theChild = Vue.extend({
  template: '<h2>My awesome component has a "{{foo}}"</h2> \
             <the-grandchild :foo="foo" :bar="bar"></the-grandchild>',
  props: ['foo'],
  data: function() {
    return {
      bar: 'bar'
    };
  },
  components: {
    'the-grandchild': theGrandChild
  }
});

// the root view model
new Vue({
  el: 'body',
  data: {
    foo: 'foo'
  },
  components: {
    'the-child': theChild
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo="foo"></the-child>

---

如果我们需要向上改变父数据，我们可以在绑定声明中添加一个 .sync 修饰符，如 :foo.sync="foo" 并指定给定的“道具”应该是 twoWay 绑定数据。

因此，通过改变组件中的数据，将分别更改父级的数据。

例如：

 var theGrandChild = Vue.extend({
  template: '<h3>The nested component has also a "{{foo}}" and a "{{bar}}"</h3> \
             <input v-model="foo" type="text">',
    props: {
      'foo': {
        twoWay: true
      },
      'bar': {}
    }
});

var theChild = Vue.extend({
  template: '<h2>My awesome component has a "{{foo}}"</h2> \
             <the-grandchild :foo.sync="foo" :bar="bar"></the-grandchild>',
  props: {
    'foo': {
      twoWay: true
    }
  },
  data: function() {
    return { bar: 'bar' };
  },
  components: {
    'the-grandchild': theGrandChild
  }
});

// the root view model
new Vue({
  el: 'body',
  data: {
    foo: 'foo'
  },
  components: {
    'the-child': theChild
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<h1>The root view model has a "{{foo}}"</h1>
<the-child :foo.sync="foo"></the-child>

原文由 Hashem Qolami 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于您需要访问每个组件中的主机名变量，并在开发模式下将其更改为 localhost，或者在生产模式下将其更改为生产主机名，您可以在原型中定义此变量。

像这样：

 Vue.prototype.$hostname = 'http://localhost:3000'

并且 $hostname 将在所有 Vue 实例中可用：

 new Vue({
  beforeCreate: function () {
    console.log(this.$hostname)
  }
})

就我而言，为了自动从开发更改为生产，我根据实例化 Vue.js 的文件中的 Vue 生产提示变量定义了 $hostname 原型。

像这样：

 Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'https://hostname' : 'http://localhost:3000'

可以在文档中找到一个示例： 添加实例属性 的文档

可以在此处找到有关生产提示配置的更多信息：

用于生产技巧的 Vue 文档

原文由 Josiel Faleiros 发布，翻译遵循 CC BY-SA 4.0 许可协议