Zastosuj zmienną globalną do Vuejs

Question

Mam zmienną javascript, którą chcę przekazać globalnie do komponentów Vue po utworzeniu, tak że każdy zarejestrowany komponent ma ją jako właściwość lub może być dostępny globalnie.

Uwaga :: muszę ustawić tę zmienną globalną dla vuejs jako READ ONLY własność

Answer 1

Można użyć Global Mixin wpływać na każdą instancję Vue. Możesz dodać dane do tego mixin, dzięki czemu wartość/wartości będą dostępne dla wszystkich komponentów vue. Aby uzyskać tę wartość Tylko do odczytu, można użyć metody opisanej w dokumencie this stackoveflow answer.

Oto przykład:

// 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

Wystarczy Adding Instance Properties

Na przykład, wszystkie komponenty mogą uzyskać dostęp do globalnego appName, wystarczy napisać kod jednym wierszu:

Vue.prototype.$appName = 'My App'

$ to nie magia, to konwencja, której Vue używa dla właściwości dostępnych dla wszystkich instancji.

Oczywiście można również writing a plugins, które obejmują wszystkie globalne metody lub właściwości.