Плагіни ​

Вступ ​

Плагіни — це самодостатній код, який зазвичай додає функціональність до Vue на рівні app. Ось як ми встановлюємо плагін:

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* додаткові опції */
})

Плагін визначається або як об'єкт, який надає метод install(), або просто як функція, яка діє як сама функція встановлення. Функція встановлення отримує екземпляр app разом із додатковими опціями, яки передаються до app.use(), якщо такі є:

const myPlugin = {
  install(app, options) {
    // налаштування app
  }
}

Немає чітко визначеної сфери застосування для плагіна, але найбільш поширені сценарії, коли плагіни корисні, включають:

1. Реєстрація одного або кількох глобальних компонентів або користувацьках директив у app.component() та app.directive().

2. Зробити ресурс injectable у всьому додатку через виклик app.provide().

3. Додавання деяких властивостей або методів глобального екземпляра, приєднавши їх до app.config.globalProperties.

4. Бібліотека, яка повинна виконати певну комбінацію вищезазначеного (наприклад, vue-router).

Написання плагіну ​

Щоб краще зрозуміти, як створювати власні плагіни Vue.js, ми створимо дуже спрощену версію плагіна, який відображає рядки i18n (скорочено від Інтернаціоналізація).

Почнемо з налаштування об'єкта плагіна. Рекомендується створити його в окремому файлі та експортувати, як показано нижче, щоб тримати логіку окремо.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Тут міститься код плагіна
  }
}

Ми хочемо створити функцію перекладу. Ця функція отримає розділений крапками рядок key, який ми будемо використовувати для пошуку перекладу рядка в опціях, наданих користувачем. Це передбачає використання в шаблонах:

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

Оскільки ця функція має бути глобально доступною в усіх шаблонах, ми зробимо її такою, приєднавши до app.config.globalProperties нашого плагіна:

// plugins/i18n.js
export default {
  install: (app, options) => {
    // введення глобально доступного методу $translate()
    app.config.globalProperties.$translate = (key) => {
      // отримати вкладену властивість у `options`,
      // використовуючи `key` як шлях
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

Наша функція $translate візьме рядок, наприклад, greetings.hello, загляне в надану користувачем конфігурацію та поверне перекладене значення.

Об'єкт, що містить перекладені ключі, слід передати плагіну під час інсталяції за допомогою додаткових параметрів до app.use():

import i18nPlugin from './plugins/i18n'

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

Тепер наш початковий вираз $translate('greetings.hello') буде замінено на Bonjour! під час виконання.

Дивіться також: Розширення глобальних властивостей

Provide / Inject з плагінами ​

Плагіни також дозволяють нам використовувати inject, щоб надати функцію або атрибут користувачам плагіна. Наприклад, ми можемо дозволити застосунку мати доступ до параметра options, щоб мати можливість використовувати об'єкт з перекладами.

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

Користувачі плагіну тепер зможуть додавати його параметри у свої компоненти за допомогою ключа 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)
  }
}