Vue.js

# Плагины

Плагины — самодостаточная единица кода, которая добавляет во Vue функциональность глобального уровня. Это может быть object с методом install(), либо function.

Для плагинов нет строго ограниченной области применения, но к числу распространённых сценариев, где плагины полезны, относятся:

  1. Добавление глобальных методов или свойств (например, vue-custom-element (opens new window)).

  2. Добавление одного или нескольких глобальных ресурсов: директивы/переходы и т.д. (например, vue-touch (opens new window)).

  3. Добавление опций компоненту с помощью глобальной примеси (например, vue-router (opens new window)).

  4. Добавление глобальных методов экземпляра через config.globalProperties.

  5. Библиотека, предоставляющая собственный API и в то же время внедряющая некоторую комбинацию из вышеперечисленного (например, vue-router (opens new window)).

# Создание плагина

Чтобы лучше понять, как создавать собственные плагины Vue.js, реализуем упрощённую версию плагина для отображения локализованных строк (i18n).

При добавлении плагина в приложение будет вызван метод install (если указывался объект) или вызвана сама функция (при использовании function). В обоих случаях она получает два параметра — объект app, являющийся результатом вызова createApp, и настройки, переданные пользователем.

Начнём с реализации объекта плагина. Рекомендуется создавать его в отдельном файле и экспортировать, как показано ниже, для изолированности и разделения его логики.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Код плагина будет здесь
  }
}
1
2
3
4
5
6

Удобно, если функция для отображения локализованной строки по ключу будет доступна во всём приложении, поэтому объявим её с помощью app.config.globalProperties.

Функция будет получать строку key, по которой будем искать переведённую строку в справочнике, переданным пользователем в настройках плагина.




 
 
 
 
 



// 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)
    }
  }
}
1
2
3
4
5
6
7
8
9
10

Подразумевается, что при использовании плагина пользователи будут передавать объект с переведёнными ключами в параметре options. Функция $translate, получив строку с ключом вида greetings.hello, станет искать перевод для неё в предоставленной конфигурации и возвращать переведённое значение — в данном случае, Bonjour!

Пример объекта с текстами переводов:

greetings: {
  hello: 'Bonjour!',
}
1
2
3

Плагины также позволяют использовать 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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

Пользователи плагина теперь могут, используя inject['i18n'] в компонентах, получить доступ к объекту с текстами переводов.

Кроме того, так как есть доступ к объекту app, то и все остальные возможности, такие как использование mixin и directive доступны в плагине. Подробнее о методе createApp и экземпляре приложения можно прочитать в документации API приложения.











 
 
 
 
 
 

 
 
 
 
 
 



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

    app.directive('my-directive', {
      mounted (el, binding, vnode, oldVnode) {
        // какая-то логика ...
      }
      ...
    })

    app.mixin({
      created() {
        // какая-то логика ...
      }
      ...
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Использование плагина

После инициализации приложения Vue с помощью createApp() подключить плагин можно с помощью метода use().

Воспользуемся плагином i18nPlugin, который создали в демонстрационных целях в разделе создание плагина.

Метод use() принимает два параметра. Первый — сам устанавливаемый плагин, в данном случае i18nPlugin.

Метод также автоматически предотвращает подключение одного и того же плагина больше одного раза, поэтому несколько его вызовов установят плагин лишь один раз.

Второй параметр является опциональным и зависит от каждого конкретного плагина. Для демо-плагина i18nPlugin это будет объект с переведёнными строками.

Информация

При использовании сторонних плагинов, таких как Vuex или Vue Router, всегда сверяйтесь с документацией, чтобы узнать, что ожидает плагин вторым параметром.

import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Дратути!'
  }
}

app.use(i18nPlugin, i18nStrings)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13

Также обратите внимание на awesome-vue (opens new window) — огромную коллекцию плагинов и библиотек от сообщества Vue.

← Vue и веб-компоненты →