Pluginy ​

Úvod ​

Pluginy jsou samostatné kusy kódu, které obvykle přidávají do Vue funkcionalitu na úrovni aplikace. Plugin instalujeme takto:

import { createApp } from 'vue'  const app = createApp({})  app.use(myPlugin, {  /* nepovinné parametry */ })

Plugin je definován buď jako objekt, který vystavuje metodu install(), nebo jednoduše jako funkce, která se jako instalátor chová sama. Instalační funkce obdrží instanci aplikace spolu s dalšími parametry předanými do app.use(), pokud existují:

const myPlugin = {  install(app, options) {  // konfigurace aplikace  } }

Pro pluginy neexistuje žádný přesně definovaný rozsah, ale běžné scénáře, ve kterých jsou užitečné, zahrnují:

1. Registrace jedné nebo více globálních komponent nebo vlastních direktiv pomocí app.component() a app.directive().

2. Označení zdroje jako injectable napříč aplikací prostřednictvím volání app.provide().

3. Přidání globálních promměných instance či metod jejich připojením k app.config.globalProperties.

4. Knihovna, která potřebuje provést kombinaci výše uvedeného (např. vue-router).

Tvorba pluginu ​

Abychom lépe pochopili, jak vlastní Vue.js pluginy vytvářet, vytvoříme velmi zjednodušenou verzi pluginu, který zobrazuje překladové i18n (zkratka pro Internationalization) řetězce.

Začněme nastavením objektu pluginu. Doporučujeme jej vytvořit v samostatném souboru a exportovat ho, jak je uvedeno níže, aby byla logika uzavřená a oddělená.

export default {  install: (app, options) => {  // kód pluginu bude zde  } }

Chceme vytvořit překladovou funkci. Tato funkce obdrží string key s tečkovým oddělovačem, který použijeme k vyhledání přeloženého textu v možnostech zadaných uživatelem. Toto je zamýšlené použití v šablonách:

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

Protože by tato funkce měla být dostupná globálně ve všech šablonách, vytvoříme ji tak, že ji v našem pluginu připojíme k app.config.globalProperties:

export default {  install: (app, options) => {  // vložit globálně dostupnou funkci `$translate()`  app.config.globalProperties.$translate = (key) => {  // získat proměnnou vnořenou v `options`  // při použití `key` jako cesty  return key.split('.').reduce((o, i) => {  if (o) return o[i]  }, options)  }  } }

Naše funkce $translate přijme string jako např. greetings.hello, podívá se do konfigurace poskytnuté uživatelem a vrátí přeloženou hodnotu.

Objekt obsahující přeložené klíče by měl být předán pluginu během instalace prostřednictvím dodatečných parametrů v app.use():

import i18nPlugin from './plugins/i18n'  app.use(i18nPlugin, {  greetings: {  hello: 'Bonjour!'  } })

Nyní bude naše volání $translate('greetings.hello') za běhu nahrazeno textem Bonjour!.

Viz také: Obohacování globálních vlastností

Provide / Inject spolu s pluginy ​

Pluginy nám také umožňují použít provide k poskytování přístupu k funkci nebo parametru uživatelům pluginu. Například můžeme aplikaci umožnit přístup k parametru options, aby mohla používat objekt s překlady.

export default {  install: (app, options) => {  app.provide('i18n', options)  } }

Uživatelé pluginu nyní budou schopni vložit options pluginu do svých komponent pomocí klíče i18n:

<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)  } }

Balíček pro NPM ​

Pokud chcete svůj plugin sestavit a publikovat pro použití ostatním, podívejte se na sekci Library Mode v dokumentaci pro Vite.