Введение
Плагины — это автономный код, который обычно добавляет в Vue функциональность уровня приложения. Вот как мы устанавливаем плагин
Плагин определяется либо как объект, предоставляющий метод install(), либо просто как функция, действующая как сама функция установки. Функция установки получает экземпляр приложения вместе с дополнительными параметрами, передаваемыми в app.use(), если таковые имеются
Для плагина не существует строго определенной области применения, но распространенные сценарии, в которых плагины полезны, включают
- 1. Зарегистрируйте один или несколько глобальных компонентов или пользовательских директив с помощью app.component() и app.directive()
- 2. Сделайте ресурс доступным для внедрения в приложение, вызвав app.provide()
- 3. Добавьте некоторые глобальные свойства или методы экземпляра, присоединив их к app.config.globalProperties
- 4. Библиотека, которая должна выполнять некоторую комбинацию вышеперечисленного (например, vue-router)
Написание плагина
Чтобы лучше понять, как создавать собственные плагины Vue.js, мы создадим очень упрощенную версию плагина, который отображает строки i18n (сокращение от Internationalization)
Начнем с настройки объекта плагина. Рекомендуется создать его в отдельном файле и экспортировать, как показано ниже, чтобы сохранить логику изолированной и изолированной.
Мы хотим создать функцию перевода. Эта функция получит строку, разделенную точкой key, которую мы будем использовать для поиска переведенной строки в предоставленных пользователем параметрах. Это предполагаемое использование в шаблонах
Поскольку эта функция должна быть глобально доступна во всех шаблонах, мы сделаем это так, подключив ее к app.config.globalProperties нашему плагину
Наша $translate функция возьмет строку типа greetings.hello, просмотрит предоставленную пользователем конфигурацию и вернет переведенное значение.
Объект, содержащий переведенные ключи, должен быть передан плагину во время установки через дополнительные параметры app.use()
Теперь наше первоначальное выражение $translate('greetings.hello') будет заменено на Bonjour! во время выполнения
Расширение глобальных свойств
Некоторые плагины устанавливают глобально доступные свойства для всех экземпляров компонентов через файлы app.config.globalProperties. Например, мы можем установить его this.$http для получения данных или this.$translate для интернационализации. Чтобы это хорошо сочеталось с TypeScript, Vue предоставляет ComponentCustomProperties интерфейс, предназначенный для расширения с помощью расширения модуля TypeScript
Тип размещения расширения
Мы можем поместить расширение этого типа в .ts файл или в файл всего проекта *.d.ts. В любом случае убедитесь, что он включен в tsconfig.json. Для авторов библиотек/плагинов этот файл должен быть указан в typesсвойстве в формате package.json
Чтобы воспользоваться преимуществами расширения модуля, вам необходимо убедиться, что расширение размещено в модуле TypeScript. То есть файл должен содержать хотя бы один файл верхнего уровня importили export, даже если это просто export {}. Если дополнение размещено вне модуля, оно перезапишет исходные типы, а не дополнит их!
Важно
Используйте глобальные свойства редко, так как это может быстро привести к путанице, если в приложении будет использоваться слишком много глобальных свойств, введенных разными плагинами.
Предоставление/внедрение плагинов
Плагины также позволяют нам использовать inject функцию или атрибут для пользователей плагина. Например, мы можем предоставить приложению доступ к options параметру, чтобы иметь возможность использовать объект переводов.
Пользователи плагинов теперь смогут вставлять параметры плагина в свои компоненты, используя ключ i18n