Ich möchte alle meine Funktionen, die mit dem Server kommunizieren und Daten abrufen, in einer einzigen wiederverwendbaren Datei in VueJS zusammenfassen.
Plugins scheinen nicht die beste Alternative zu sein. Vorlage weniger Komponenten ..?
Insgesamt gibt es 4 Möglichkeiten:
Ich verwende Axios als HTTP-Client für API-Aufrufe. Ich habe einen
gateways
Ordner in meinemsrc
Ordner erstellt und Dateien für jedes Backend abgelegt , um Axios-Instanzen wie folgt zu erstellenmyApi.js
Jetzt in Ihrer Komponente können Sie eine Funktion haben, die Daten wie folgt von der API abruft:
Da ich davon ausgehe , dass Sie diese Methode in mehreren Komponenten wiederverwenden möchten, können Sie Mixins von vue.js verwenden:
Sie können also eine Methode in mixin hinzufügen, die in allen Komponenten verfügbar ist, in denen mixin gemischt wird. Siehe folgendes Beispiel:
quelle
Ich benutze hauptsächlich Vue Resource.
1.Ich erstelle eine neue Datei, in der ich mit
Vue.http.xxx
.O eine Verbindung zum API-Endpunkt herstelle. Nehmen wir also an, wir haben einen Endpunkt, der die Beiträge ausgibt. Erstellen Sie ein neues Verzeichnis in Ihrem Projekt, ich nenne esservices
, und erstellen dann eine Datei mit dem NamenPostsService.js
- Inhalt sieht folgendermaßen aus:Dann gehe ich zu der Komponente, in der ich diesen Dienst verwenden möchte, und importiere ihn
Weitere Informationen zu diesem Ansatz finden Sie in meinem Repo auf GitHub unter https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app
quelle
Ich schlage vor, einen API-Anbieter zu erstellen, auf den Sie von überall in Ihrer App zugreifen können.
Erstellen Sie einfach einen
src/utils
Ordner und darin eine Datei namensapi.js
.Exportieren Sie darin Ihren Wrapper, der weiß, wie man mit Ihrer API als Objekt oder als statische ES6-Klasse kommuniziert (ich bevorzuge, wie letztere aussieht und funktioniert, wenn Sie keine Angst vor Klassen haben). Dieser Anbieter kann jede beliebige HTTP-Anforderungsbibliothek verwenden und diese später problemlos austauschen, indem Sie eine einzelne Datei (diese) ändern, anstatt die gesamte Codebasis zu durchsuchen. Hier ist ein Beispiel für die Verwendung von Axios, vorausgesetzt, wir haben eine REST-API zur Verfügung
api.example.com/v1
, die SSL verwendet:main.js
Führen Sie als Nächstes in Ihrer Datei oder an einem anderen Ort, an dem Sie die Vue-App booten, Folgendes aus:Jetzt können Sie überall in Ihrer Vue-App darauf zugreifen sowie überall dort, wo Sie Vue selbst importieren:
oder:
Hoffe das hilft.
quelle
Ich denke, für Ihre einfache Frage könnte die Antwort jedes ES6-Modul sein, das Funktionen enthält (entspricht Methoden in der Klasse in ANgular) und diese mithilfe von ES6-Importen und -Exporten direkt in Komponenten importiert. Es gibt keine solchen Dienste, die in Komponenten injiziert werden könnten.
quelle
Sie können Ihren eigenen Dienst erstellen, in dem Sie alle Ihre HTTP-Serveraufrufe tätigen und diese dann in die Komponenten importieren können, in denen Sie sie verwenden möchten.
Verwenden Sie Vuex am besten für komplexe Statusverwaltungsanwendungen, da Sie in Vuex alle asynchronen Aufrufe über Aktionen verarbeiten können, die immer asynchron ausgeführt werden, und die Mutation dann festschreiben, sobald Sie das Ergebnis haben. Die Mutation interagiert direkt mit dem Status und wird aktualisiert es auf unveränderliche Weise (was bevorzugt wird). Dies ist ein zustandsbehafteter Ansatz.
Es gibt auch andere Ansätze. Aber das sind diejenigen, denen ich in meinem Code folge.
quelle