Plugins ​

Einführung ​

Plugins sind in sich geschlossener Code, der Vue normalerweise um Funktionen auf App-Ebene erweitert. So installieren wir ein Plugin:

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* optional options */
})

Ein Plugin ist entweder ein Objekt, das eine install()-Methode bereitstellt, oder eine Funktion, die selbst als Installationsfunktion fungiert. Die Installationsfunktion empfängt die App-Instanz zusammen mit zusätzlichen Optionen, die gegebenenfalls an app.use() übergeben werden:

const myPlugin = {
  install(app, options) {
    // configure the app
  }
}

Es gibt keinen streng definierten Anwendungsbereich für ein Plugin, aber gängige Szenarien, in denen Plugins nützlich sind, sind unter anderem:

1. Registrieren Sie eine oder mehrere globale Komponenten oder benutzerdefinierte Anweisungen mit app.component() und app.directive().

2. Machen Sie eine Ressource injizierbar in der gesamten App durch Anrufen app.provide().

3. Fügen Sie einige globale Instanzeigenschaften oder Methoden hinzu, indem Sie sie anhängen an app.config.globalProperties.

4. Eine Bibliothek, die eine Kombination der oben genannten Aufgaben ausführen muss (z. B. vue-router).

Ein Plugin schreiben ​

Um besser zu verstehen, wie Sie Ihre eigenen Vue.js-Plugins erstellen, erstellen wir eine sehr vereinfachte Version eines Plugins, das i18n-Strings (kurz für Internationalization) anzeigt.

Beginnen wir mit der Einrichtung des Plugin-Objekts. Es wird empfohlen, es in einer separaten Datei zu erstellen und wie unten gezeigt zu exportieren, um die Logik in sich geschlossen und getrennt zu halten.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

Wir möchten eine Übersetzungsfunktion erstellen. Diese Funktion erhält einen durch Punkte getrennten Schlüsselstring, mit dem wir den übersetzten String in den benutzerdefinierten Optionen suchen. Dies ist die vorgesehene Verwendung in Vorlagen:

<h1>{{ $translate('greetings.hello') }}</h1>

Da diese Funktion global in allen Vorlagen verfügbar sein sollte, machen wir das so, indem wir sie in unserem Plugin an app.config.globalProperties anhängen:

// plugins/i18n.js
export default {
  install: (app, options) => {
    // inject a globally available $translate() method
    app.config.globalProperties.$translate = (key) => {
      // retrieve a nested property in `options`
      // using `key` as the path
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

Unsere Funktion $translate nimmt eine Zeichenfolge wie greetings.hello, sieht sich die vom Benutzer bereitgestellte Konfiguration an und gibt den übersetzten Wert zurück.

Das Objekt mit den übersetzten Schlüsseln sollte während der Installation über zusätzliche Parameter an app.use() an das Plugin übergeben werden:

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

Nun wird unser ursprünglicher Ausdruck $translate(‚greetings.hello‘) zur Laufzeit durch Bonjour! ersetzt.

Siehe auch: Erweiterung globaler Eigenschaften

Bereitstellen/Einfügen mit Plugins ​

Plugins ermöglichen es uns auch, mit inject den Benutzern des Plugins eine Funktion oder ein Attribut zur Verfügung zu stellen. So können wir beispielsweise der Anwendung Zugriff auf den Parameter „options“ gewähren, damit sie das Übersetzungsobjekt verwenden kann.

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}

Plugin-Benutzer können nun die Plugin-Optionen mithilfe des Schlüssels i18n in ihre Komponenten einfügen:

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}