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

Question

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

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

我的理解是否正确，如果我这样做，我就可以在任何地方用 this.hostname 调用它？

Answer 1

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

如果 "global" 变量附加到全局对象，即网络浏览器中的 window 对象，声明变量的最可靠方法是将其设置在显式全局对象：

window.hostname = 'foo';

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

例如，如果根 viewModel 有一个 hostname 数据，则可以使用 v-bind 指令将值绑定到嵌套组件，如 v-bind:hostname="hostname" 或简称 :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" 并指定给定的 'props' 应该是一个 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>

Answer 2

对于任何单一文件组件用户，以下是我设置全局变量的方法

假设你使用的是 Vue-Cli 的 webpack 模板
在某处声明变量 variable.js
```
const shallWeUseVuex = false;
```

导出到 variable.js

module.exports = { shallWeUseVuex : shallWeUseVuex };

Require 并在你的 vue 文件中赋值

export default {
    data() {
        return {
            shallWeUseVuex: require('../../variable.js')
        };
    }
}

参考：https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

Answer 3

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

像这样：

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

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

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

在我的例子中，为了自动从开发切换到生产，我根据实例化 Vue 的文件中的 Vue 生产提示变量定义了 $hostname 原型。

像这样：

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

可以在文档中找到示例： Documentation on Adding Instance Properties

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

Vue documentation for production tip

Answer 4

我强烈建议看一下 Vuex，它是为 Vue 中的全局可访问数据而制作的。

如果你只需要一些永远不会被修改的基本变量，我会使用 ES6 导入：

// config.js
export default {
   hostname: 'myhostname'
}

// .vue file
import config from 'config.js'

console.log(config.hostname)

你也可以用同样的方法导入一个json文件，没有代码知识的人可以编辑它或者导入到SASS.

Answer 5

在vue cli-3中可以像

那样在main.js中定义变量

window.basurl="http://localhost:8000/";

并且您还可以在任何组件中访问此变量，方法是使用的 window.basurl

Answer 6

一种可能是在 index.html 处声明变量，因为它确实是全局变量。可以添加一个 javascript 方法到 return 变量的值，它将是 READ ONLY.

可以在这个答案中找到此解决方案的示例：

Answer 7

一个vue3 replacement of :

// Vue3

const app = Vue.createApp({})
app.config.globalProperties.$hostname = 'http://localhost:3000'


app.component('a-child-component', {
  mounted() {
    console.log(this.$hostname) // 'http://localhost:3000'
  }
})

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

What is the best way to declare global variables in Vue.js?

global-variables

vue.js