Vue.js: Dienst definieren

Lesezeit: 7 Minuten

Benutzer-Avatar
Herr Derbe

Ich schaue mir Vue.js als Alternative zu Angular an und es gefällt mir bisher sehr gut. Um ein Gefühl dafür zu bekommen, refaktoriere ich ein bestehendes Angular-Projekt in ein Vue-Projekt. Ich bin gerade an dem Punkt, an dem ich mit meiner REST-API kommunizieren muss.

In Angular habe ich dafür einen Service definiert, der in jeden Controller injiziert wurde, der ihn brauchte. Vue scheint das Konstrukt “Service” nicht zu kennen, wie ich es verstehe. Wie kann dies in Vue erreicht werden?

Ich überlegte vue-resource, aber soweit ich weiß, nur für HTTP-Funktionen. Da ich auch jQuery verwende, ist dies obsolet.

Beispiel:

Ich habe vueComponent1 und vueComponent2. Beide benötigen Zugriff auf dieselbe REST-Ressource. Um dies zu handhaben, möchte ich einen zentralen Dienst, den beide Komponenten für Anfragen an die REST-Ressource verwenden können. Angular hat die „Service“-Komponente, die genau das tut. Vue nicht.

  • Geben Sie ein konkretes Beispiel dafür, was Sie brauchen. http reicht aus, um mit REST zu kommunizieren

    – gurgel

    21. Juli 2016 um 8:24 Uhr


  • Schau mal bei vue-resource: github.com/vuejs/vue-resource

    – Null

    21. Juli 2016 um 9:29 Uhr

Aus der Vue.js-Dokumentation.

Vue.js selbst ist kein vollständiges Framework – es konzentriert sich nur auf die Ansichtsebene.

Als Bibliothek, die sich auf das V von MVC konzentriert, bietet sie keine Dienste an.

Verwenden Sie eine Art Modullader wie Browserify oder Webpack?
Dann können Sie das Modulsystem von ES6 nutzen, um selbst einen Dienst zu erstellen.
Sie müssen lediglich eine einfache JavaScript-Klasse erstellen, die von diesem neuen Modul exportiert wird.

Ein Beispiel könnte so aussehen:

export default class RestResource {

  sendRequest() {
    // Use vue-resource or any other http library to send your request
  }

}

Innerhalb Ihrer vue-Komponente 1 und 2 können Sie diesen Dienst nutzen, indem Sie die Klasse importieren.

import RestResource from './services/RestResource';

const restResourceService = new RestResource();

restResourceService.sendRequest();

  • Danke für das Zitat. Dies bedeutet, dass es keine Struktur oder irgendetwas unter Ansicht und Modell gibt. Wenn ich einen Dienst haben möchte, muss ich meinen eigenen bauen, zB mit reinem JS.

    – Herr Derb

    22. Juli 2016 um 8:24 Uhr

  • Ich erhalte movieslist.vue?1be4:38Uncaught TypeError: _resource.Resource is not a constructor wenn ich das benutze…

    – Georg Katsanos

    25. Oktober 2016 um 8:43 Uhr

  • Ihnen fehlt ein wesentlicher Unterschied zu dem, was Sie mit einem eckigen Hintergrund erwarten würden. Der „Service“ wird in diesem Fall mehrfach instanziiert, während bei der Shared Service Injection nur eine Instanz übergeben wird

    – phil294

    10. März 2018 um 16:53 Uhr

  • Ja, auf diese Weise erhalten Sie mehrere Instanzen desselben Dienstes. Das ist kein Problem, wenn es nur eine Ajax-Anforderung ausführt (nur ineffizient), aber wenn Sie den Dienst für Ihr Datenmodell verwenden, müssen Sie ihn dort instanziieren, wo Sie den Dienst deklarieren, und nur die Instanz exportieren.

    – mcv

    4. Dezember 2018 um 15:15 Uhr

  • Wenn Sie einen Singleton-Dienst im „Angular-Stil“ wünschen, können Sie einfach irgendwo in Ihrer App eine Instanz dieser Klasse erstellen und exportieren: export const restResourceService = new RestResource(); und importieren Sie es dann, wo immer Sie möchten. Dies schafft jedoch wirklich eine Lösung für ein Problem, das wir für uns selbst geschaffen haben – warum nicht einfach eine Funktion verwenden? export function sendRequest() { // Make the request } Beachten Sie schließlich, dass Sie nicht unbedingt eine Bibliothek benötigen, um eine HTTP-Anfrage zu stellen – je nach Ihren Projektanforderungen können Sie einfach das JavaScript verwenden fetch API.

    – Will Taylor

    11. März 2020 um 18:09 Uhr


Sie können die Instanz einer Klasse für Ihren Dienst exportieren:

export default new class {
   ...
}

In Ihrer Komponente oder an einem anderen Ort können Sie die Instanz importieren und erhalten immer dieselbe. Auf diese Weise verhält es sich ähnlich wie ein injizierter Angular-Dienst, jedoch ohne Verwendung this.

import myService from '../services/myservice';

Vue.component('my-component', {
  ...
  created: function() {
    myService.oneFunction();
  }
  ...
})

Benutzer-Avatar
Eric Petrucelli

Ab der Vue.js-Dokumentation Erstellen von groß angelegten Apps.

Die Gemeinde hat dazu beigetragen vue-Ressource Plugin, das eine einfache Möglichkeit bietet, mit RESTful-APIs zu arbeiten. Sie können auch jede beliebige Ajax-Bibliothek verwenden, zB $.ajax oder Superagent.

Vue verlangt nicht, dass Sie einer bestimmten Architektur folgen, da es sich nur auf die Ansichtsschicht in einer MVC- oder MVVM-Architektur bezieht. Wie @Marc bereits in seiner Antwort sagte, empfiehlt es sich, einen Modullader wie Browserify oder Webpack zu verwenden, damit Sie Ihre “Dienste” in separaten Dateien erstellen und sie dort importieren können, wo Sie sie benötigen. Es ist sehr einfach, Ihre App mit einem Modullader zu strukturieren vue-cli.

In der Tat, ich persönlich mag die Fluss Architektur für komponentenbasierte Apps, dann empfehle ich Ihnen, einen Blick darauf zu werfen Vuexeine von Flux inspirierte Anwendungsarchitektur, die speziell für die Statusverwaltung in Vue.js-Apps entwickelt wurde.

Auf diese Weise können Sie Aktionen erstellen, die verwenden vue-Ressource Um Ihre API anzufordern, können Sie Mutationen senden, wenn die Daten ankommen, wobei alle Komponenten, die diese Daten benötigen, bereits an den globalen Zustand gebunden sind und automatisch reagieren. Mit anderen Worten, Ihre Komponenten selbst müssen die Dienste nicht aufrufen, sie reagieren nur auf Statusänderungen, die von Mutationen gesendet werden.

  • Nur eine Anmerkung, dass vue-resource nicht mehr offiziell empfohlen wird. Quelle

    – Lichtschalter05

    9. Juli 2018 um 13:36 Uhr

  • Sehen Sie sich die Details an: Vue-Ressource wird zurückgezogen geschrieben von Evan You

    – JeffMinsungKim

    9. Juli 2018 um 16:54 Uhr


  • Axios ist derzeit das empfohlene Plugin, das anstelle von vue-resource verwendet werden sollte.

    – Luis Martin

    22. Dezember 2020 um 22:30 Uhr

Sie haben einige sehr gute Antworten darauf in dieser Frage Was ist das Äquivalent von Angular Service in VueJS?

Wie @Otabek Kholikov dort sagt – Sie haben 4 Möglichkeiten:

  1. Zustandsloser Dienst: Dann sollten Sie Mixins verwenden
  2. Statefull-Service: Verwenden Sie Vuex
  3. Dienst exportieren und aus einem Vue-Code importieren
  4. jedes globale Javascript-Objekt

In meinen Projekten bevorzuge ich (4). Es gibt mir die maximale Flexibilität und hat nur die Implementierungen, die ich brauche (ich bringe zum Beispiel Vuex nicht mit und sollte mich nicht streng an seine Regeln halten und es gibt keine “Magie” – der gesamte Code gehört mir). Sie haben ein Beispiel für die Implementierung in der Frage, die ich oben erwähnt habe.

Benutzer-Avatar
MikeT

Wenn Sie keinen Modullader verwenden, können Sie einen benutzerdefinierten definieren Plugin. Einige Beispielcode:

var myPlugin = {
        install: function (Vue, options) {
            //private
            var myPrivateProperty = 'Private property';

            //instance properties and methods
            Vue.prototype.$myPublicProperty = 'Public Property';

            Vue.prototype.$myAddedMethod = function () {
                return myPrivateProperty;
            };
            Vue.prototype._getData = function (url) {
                return url;
            };

            //static properties and methods
            Vue.myStaticProperty = 'My static prop';
            Vue.myStaticMethod = function () {
                console.log('in');
            }
        }
    };

    Vue.use(myPlugin);

    new Vue({
        el: '#app',
        created: function () {
            //using instance
            console.log(this.$myAddedMethod());
            console.log('my get data: ' + this._getData('some url'));
            console.log(this.$myPublicProperty);

            //using static
            console.log(Vue.myStaticProperty);
            Vue.myStaticMethod();
        }
    });

Sie können auch andere Bibliotheken anschließen, dieser Beitrag zeigt, wie man axios.js einbindet

  • Beachten Sie, dass dies Ihren Dienst von jeder Komponente aus zugänglich macht, und durch diese Logik, wenn Sie einen Vue-Router verwenden, insbesondere auf einem statischen Site-Generator, wird er von jeder Seite aus zugänglich sein. In seltenen Ausnahmefällen möchten Sie möglicherweise, dass ein Dienst noch nicht instanziiert wird, sodass Sie einen anderen Weg finden müssen, einen solchen Dienst zu verwalten. Der Grund dafür ist, dass, wenn Ihr Dienst Objekte enthält und Ihre Vorlage auf solche Objekte im Code verweist, diese Objekte noch vor der „erstellten“ Lebenszyklusmethode instanziiert werden müssen (Sie könnten dies mit v-if auf einem Stammelement steuern).

    – OzzyTheGiant

    6. Dezember 2021 um 21:15 Uhr


  • @OzzyTheGiant Was er gesagt hat, sicherlich. Ich habe mich nicht mehr mit Vue befasst, seit Blazor herauskam. (Kein gesponserter Kommentar 😛 )

    – MikeT

    12. März um 17:57 Uhr

Benutzer-Avatar
wolframhempel

Sie können Vue-Instanz-spezifische Dienste beim Erstellen der Vue-Instanz angeben

new Vue({
    el: '#app-container',
    myService: new MyService()
})

und greifen Sie von Ihren Komponenten aus darauf zu

this.$root.$options.myService.doStuff()

  • Beachten Sie, dass dies Ihren Dienst von jeder Komponente aus zugänglich macht, und durch diese Logik, wenn Sie einen Vue-Router verwenden, insbesondere auf einem statischen Site-Generator, wird er von jeder Seite aus zugänglich sein. In seltenen Ausnahmefällen möchten Sie möglicherweise, dass ein Dienst noch nicht instanziiert wird, sodass Sie einen anderen Weg finden müssen, einen solchen Dienst zu verwalten. Der Grund dafür ist, dass, wenn Ihr Dienst Objekte enthält und Ihre Vorlage auf solche Objekte im Code verweist, diese Objekte noch vor der „erstellten“ Lebenszyklusmethode instanziiert werden müssen (Sie könnten dies mit v-if auf einem Stammelement steuern).

    – OzzyTheGiant

    6. Dezember 2021 um 21:15 Uhr


  • @OzzyTheGiant Was er gesagt hat, sicherlich. Ich habe mich nicht mehr mit Vue befasst, seit Blazor herauskam. (Kein gesponserter Kommentar 😛 )

    – MikeT

    12. März um 17:57 Uhr

Benutzer-Avatar
Wallace Maxters

Sie können vue-Ressourcen global konfigurieren als

Vue.http.options.root = "your base url"

und jetzt können Sie bei jedem HTTP-Aufruf einfach den Namen der Ressource aufrufen –

this.$http.get('');
this.$http.get('users')

1225520cookie-checkVue.js: Dienst definieren

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy