Ich brauche Zugriff auf meine hostname Variable in jeder Komponente.Was ist der beste Weg, um globale Variable in Vue.js zu deklarieren?
Ist es eine gute Idee, es in data zu setzen?
Bin ich richtig zu verstehen, dass wenn ich das tue, ich es überall durch this.hostname anrufen kann?
Warnung: Die folgende Antwort verwendet Vue 1.x. Die Datenmutation twoWay wird aus Vue 2.x entfernt (glücklicherweise!). Ich werde die Antwort demnächst entsprechend aktualisieren.
Bei „globalen“ Variablen-, die auf das globale Objekt angebracht ist, die das Fensterobjekt in Web ist Browser-der zuverlässigste Weg, um die Variable zu deklarieren, ist es auf dem globale Objekt zu setzen explizit:
window.hostname = 'foo';
Wie auch immer VUs Hierarchieperspektive (die Wurzelansicht Modell und verschachtelte Komponenten) die Daten können nach unten übergeben werden (und kann nach oben mutiert werden, wenn TwoWay-Bindung angegeben ist).
Zum Beispiel, wenn die Wurzel ein Ansichtsmodell hostname Daten hat, kann der Wert auf eine verschachtelte Komponente mit v-bind Richtlinie v-bind:hostname="hostname" oder kurz :hostname="hostname" gebunden sein.
Und innerhalb der Komponente kann der gebundene Wert durch Komponente props Eigenschaft zugegriffen werden.
Schließlich werden die Daten an this.hostname weitergeleitet und können bei Bedarf in der aktuellen Vue-Instanz verwendet werden.
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>In den Fällen, die wir der Eltern-Daten nach oben mutieren, dann können wir einen .sync Modifikator unsere verbindliche Erklärung wie :foo.sync="foo" und geben Sie fügen hinzu, dass die gegebenen ‚Requisiten‘ soll eine gebundene Daten twoWay sein.
Durch Mutation der Daten in einer Komponente würden daher die Daten des Elternteils geändert.
Zum Beispiel:
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>für jeden einzelnen Datei Component-Benutzer, hier ist, wie ich globalen Variable eingerichtet (s)
const shallWeUseVuex = false;module.exports = { shallWeUseVuex : shallWeUseVuex };Require und es in Ihrer vue Datei export default { data() { return { shallWeUseVuex: require('../../variable.js') }; } }Ref: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
Leider shallWeUseVuex ist eine Variable, wenn sie in data() {} definiert ist, d. H. Sie kann geändert werden. Leider können Sie 'const shallWeUseVuex' nicht in Templates oder HTML verwenden, sondern Sie müssen auf die Variable version von data() {} verweisen - was, wie erwähnt, keine Konstante ist. –
Wie Sie Zugriff auf Ihre Hostnamen Variable in jeder Komponente benötigen, und es zu ändern, während auf localhost Im Entwicklungsmodus oder auf www.your-api.com im Produktionsmodus können Sie diese Variable im Prototyp definieren.
So:
Vue.prototype.$hostname = 'http://localhost:3000'
Und $ Hostname wird in allen Vue Instanzen zur Verfügung:
new Vue({
beforeCreate: function() {
console.log(this.$hostname)
}
})
In meinem Fall automatisch von der Entwicklung bis zur Produktion zu ändern, habe ich den $ definiert Hostname-Prototyp gemäß einer Vue-Produktionsspitzenvariable in der Datei, in der ich den Vue instanziiert habe.
So:
Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'http://localhost:3000' : 'https://www.your-api.com'
Ein Beispiel kann in der Dokumentation zu finden:
definieren „bald: Documentation on Adding Instance Properties
Mehr über Produktionsspitze Config finden Sie hier ", Bitte. –
Ich denke er meinte "nie". –
Er muss nicht. Vue war schneller und hat es neu implementiert: https://vuejs.org/v2/guide/components.html#sync-Modifier – NeoDevlin