在Vue.js中聲明全局變量的最好方法是什麼？

Question

我需要在每個組件中訪問我的hostname變量。

將它放在data內是個好主意嗎？

我的理解是，如果我這樣做，我可以稱之爲無處不在this.hostname？

Answer 1

警告：下面的答案是使用Vue 1.x.數據突變twoWay從Vue 2.x中刪除（幸運的是！）。我會盡快更新答案，相應地。

在「全局」變量，附加到全局對象，這是在網頁的窗口對象瀏覽器，最可靠的方式來聲明變量的情況下將其設置全局對象明確的：

window.hostname = 'foo'; 

但是，從Vue的層次結構透視圖（根視圖模型和嵌套組件）中，數據可以向下傳遞（如果指定了雙向綁定，則可以向上突變）。

例如，如果根視圖模型具有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修改我們約束力的聲明像​​並指定給定的「道具」應該成爲一個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

任何單個文件組件的用戶，這是我如何設置全局變量（一個或多個）

1. 假設你正在使用Vue- Cli的webpack模板
2. 在某處聲明變量（s）variable.js
   const shallWeUseVuex = false;
3. 將其導出爲變量。JS
   module.exports = { shallWeUseVuex : shallWeUseVuex };
4. 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

當你需要訪問的每一個部件的主機名的變量，並把它更改爲本地主機，而在開發模式下，或者在生產模式下www.your-api.com時，您可以在原型中定義此變量。

像這樣：

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

和$主機將在所有Vue的實例：

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

在我的情況下，自動從開發到生產的改變，我已經定義了$ hostname原型根據Vue生成提示變量在我實例化Vue的文件中。

像這樣：

Vue.config.productionTip = false 
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'http://localhost:3000' : 'https://www.your-api.com' 

一個例子可以在文檔中找到： Documentation on Adding Instance Properties

更多關於生產尖端的配置可以在這裏找到：

Vue documantation for production tip