Globale Daten mit VueJs 2

Question

Ich bin relativ neu mit VueJS, und ich habe keine Ahnung, wie man einige Daten global verfügbar macht. Ich möchte Daten wie API-Endpunkte, Benutzerdaten und einige andere Daten, die von der API abgerufen werden, irgendwo speichern, wo jede Komponente zu diesen Daten gelangen kann.
Ich weiß, ich kann dies nur mit Vanille Javascript speichern, aber ich nehme an, es gibt eine Möglichkeit, dies mit VueJS zu tun. Ich kann möglicherweise das Event-Bus-System verwenden, um die Daten zu erhalten, aber ich weiß nicht, wie ich dieses System für meine Bedürfnisse implementieren kann.

Ich würde es schätzen, wenn mir jemand damit helfen kann.

Answer 1

Machen Sie ein globales Datum

const shared = { 
    api: "http://localhost/myApi", 
    mySharedMethod(){ 
     //do shared stuff 
    } 
} 

Objekt Wenn Sie Notwendigkeit es auf Ihrem Vue zu belichten, können Sie.

new Vue({ 
    data:{ 
     shared 
    } 
}) 

Wenn Sie das nicht tun, können Sie immer noch Zugriff auf sie in Ihrem Vues oder Komponenten, wenn Sie es importiert haben oder sie sind auf der gleichen Seite definiert.

Es ist wirklich so einfach. Sie können Shared als Eigenschaft weitergeben oder global darauf zugreifen.

Wenn Sie gerade erst anfangen, gibt es keinen wirklichen Bedarf, kompliziert zu werden. Vuex wird oft empfohlen, ist aber oft auch für kleine Projekte übertrieben. Wenn Sie später feststellen, dass Sie es brauchen, ist es nicht so schwer, es hinzuzufügen. Es ist auch wirklich für State Management und es klingt wie Sie wollen wirklich Zugang zu einigen globalen Daten.

Wenn Sie Lust bekommen, machen Sie es zu einem Plugin.

const shared = { 
    message: "my global message" 
} 

shared.install = function(){ 
    Object.defineProperty(Vue.prototype, '$myGlobalStuff', { 
    get() { return shared } 
    }) 
} 

Vue.use(shared); 

Vue.component("my-fancy-component",{ 
    template: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>" 
}) 

new Vue({ 
    el: "#app" 
}) 

Jetzt wird jeder Vue erstellt und jede Komponente hat Zugriff darauf. Hier ist ein example.

Answer 2

Ich verwende nur eine environment.js-Datei, um alle meine Endpunkte als Objekteigenschaften zu speichern.

var urls = {}; 
urls.getStudent = "api/getStudent/{id}"; 
etc... 

Dann legte ich Verweis auf diese Datei im Kopf des Dokuments auf den Seiten environment.js wo ich VueJS Code, der den Zugriff auf diese Endpunkte benötigt. Ich bin sicher, es gibt viele Möglichkeiten, dies zu tun.