Vue-Injector

Abhängigkeitsinjektionsbibliothek für Vue.js

Wolkenhintergrundbild in der Hero-Sektion

Beschreibung

Hauptmerkmale

Vorteile

Codebeispiel

Beschreibung

Vue Injector ist eine Open-Source-Bibliothek zur Abhängigkeitsinjektion für Vue.js, die vom SCAND-Team entwickelt wurde. Die Bibliothek enthält eine Reihe von Instanzen, die für die Implementierung des Abhängigkeitsinjektionsmusters verwendet werden können.

Abhängigkeiten sind Dienste oder Objekte, die eine Klasse benötigen, um ihre Funktion auszuführen. DI ist ein Codierungsmuster, bei dem eine Klasse nach Abhängigkeiten von externen Quellen fragt, anstatt sie selbst zu erstellen, und Vue Injector bietet die Möglichkeit, Abhängigkeiten in eine Komponente im Moment ihrer Erstellung einzufügen. Die Bibliothek kann für die Entwicklung flexibler, effizienter und robuster Anwendungen verwendet werden, die in Zukunft einfacher zu testen und zu warten sind.

Es gibt eine detaillierte Beschreibung des Installationsprozesses von Vue Injector und der Möglichkeiten, wie es für verschiedene Zwecke verwendet werden kann, einschließlich der Spezifikation von Abhängigkeiten für Vue.js-Komponenten, Integration von Komponenten, Injektion von Eigenschaften in Komponenten usw. Lesen Sie die Dokumentation, um mehr zu erfahren alle Details.

Hauptmerkmale

Vue Injector ist eine Open-Source-Bibliothek zur Abhängigkeitsinjektion für Vue.js, die vom SCAND-Team entwickelt wurde. Die Bibliothek enthält eine Reihe von Instanzen, die für die Implementierung des Abhängigkeitsinjektionsmusters verwendet werden können. Außerdem enthält es Folgendes:

  • Abhängigkeitsinjektion für Komponenten
  • Bau der injektierten Dienste
  • Zugänglichkeit der Vue-Anwendung vom Dienst
  • Verwendung von Dekoratoren für eine komfortable Bedienung

Vorteile der Verwendung von Vue Injector

Vue Injector bietet einige erhebliche Vorteile, die oft unbewusst erreicht werden können, indem einfach die initialisiererbasierte Abhängigkeitsinjektion für alle Objekte verwendet wird. Die Hauptvorteile der Bibliothek sind die folgenden:

  • Bietet Entwicklern die Möglichkeit, Dependency Injection zu verwenden – ein wichtiges Entwurfsmuster, das standardmäßig nicht im Vue.js-Framework enthalten ist
  • Bietet einen bequemen Mechanismus zur Datenübertragung
  • Ermöglicht das Erstellen sowohl eines Dienstes als auch einer Dienstfactory
  • Ermöglicht das Anfordern des Dienstes, anstatt ihn zu erstellen, und bietet die Möglichkeit, von Schnittstellen statt von konkreten Typen abhängig zu sein
  • Bietet die Möglichkeit, Event Bus zu implementieren
  • Fördert die Flexibilität, Effizienz und Robustheit der Anwendung
  • Ermöglicht das Erstellen von leicht testbaren und wartbaren Anwendungen
Beispiel für einen Vue-Injector-Code
// component/todoList.js
 
/** ... */
 
/** 
 *  You also can use @Inject(Http) httpClient;
 *  It is possible for class-style Vue components.
 */
 
import Http from '../services/http';
 
export default {
  name: 'TodoList',
  providers: {
    httpClient: Http
  },
  created() {
    this.httpClient
      .get(URL)
      /** any pipes */
      .subscribe(
        this.taskHandler
      )
  },
  methods: {
    taskHandler(tasks) {
      /** ... */
    }
  }
}
 
// services/setup.js
 
import Vue from 'vue';
import { VueInjector } from '@scandltd/vue-injector';
 
Vue.use(VueInjector);
 
export default new VueInjector();
 
// main.js
 
import injector from './services/setup';
 
/** ... */
 
const root = new Vue({
  /** ... */
  injector
});
 
// services/client.js
 
import axios from 'axios';
import { Injectable } from '@scandltd/vue-injector';
 
@Injectable({
  useFactory: () => axios.create(/** ... */)
})
class Client {}
 
export default Client;
 
// services/http.js
 
import { Injectable, Inject } from '@scandltd/vue-injector';
import * as Observable from 'rxjs/internal/observable/fromPromise';
import { map } from 'rxjs/operators';
 
import Client from './Client';
 
@Injectable
class Http {
  @Inject(Client) client;
 
  observableFactory(promise) {
    return Observable
      .fromPromise(promise)
      .pipe(
        map(({ data }) => data)
      );
  }
 
  /** ... */
 
  get(url, params) {
    return this.observableFactory(
      this.client.get(url, { params })
    );
  }
}
 
export default Http

Verwandte Produkte

CurlEffect

CurlEffect ist eine Xamarin-Bibliothek, mit der Entwickler raffinierte Umblättereffekte erstellen können. Einfach in jeder App zu verwenden.

EpuBear

Einfaches und leicht anpassbares plattformübergreifendes EPUB-SDK für die Entwicklung von EPUB-Readern – Besuchen Sie die Produktseite.

Realm Browser für Android

Die Realm Browser Library ist eine kleine, aber sehr hilfreiche Bibliothek zum Anzeigen und Bearbeiten von Realm-Datenbankdateien auf Android-Geräten.

ASP.NET MVC-Module

Open-Source-MVC-Framework für .NET, um das Packen mehrerer Ressourcen, einschließlich Ansichten, Symbole, Skripte usw., in einer DLL zu ermöglichen.

Alle Produkte entdecken