Globale Variable auf Vuejs anwenden

Question

Ich habe eine Javascript-Variable, die ich bei der Instanziierung global an Vue-Komponenten übergeben möchte, also hat jede registrierte Komponente entweder eine Eigenschaft oder es kann global darauf zugegriffen werden.

Hinweis :: Ich brauche diese globale Variable für vuejs gesetzt als ein NUR

Eigenschaft LESEN

Answer 1

Sie eine Global Mixin jede Vue Instanz beeinflussen können. Sie können Daten zu diesem Mix hinzufügen und einen Wert/Werte für alle vue-Komponenten verfügbar machen.

Um diesen Wert schreibgeschützt zu verwenden, können Sie die in this stackoveflow answer beschriebene Methode verwenden. Hier

ein Beispiel:

// This is a global mixin, it is applied to every vue instance 
 
Vue.mixin({ 
 
    data: function() { 
 
    return { 
 
     get globalReadOnlyProperty() { 
 
     return "Can't change me!"; 
 
     } 
 
    } 
 
    } 
 
}) 
 

 
Vue.component('child', { 
 
    template: "<div>In Child: {{globalReadOnlyProperty}}</div>" 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    created: function() { 
 
    this.globalReadOnlyProperty = "This won't change it"; 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 
<div id="app"> 
 
    In Root: {{globalReadOnlyProperty}} 
 
    <child></child> 
 
</div>

Answer 2

Gerade Adding Instance Properties

Zum Beispiel werden alle Komponenten eines globalen appName zugreifen können, müssen Sie nur eine Zeile Code schreiben:

Vue.prototype.$appName = 'My App'

$ ist keine Magie, es ist eine Konvention, die Vue für Eigenschaften verwendet, die für alle Instanzen verfügbar sind.

Natürlich können Sie writing a plugins, die alle globalen Methoden oder Eigenschaften enthalten.