Используйте любую JS библиотеку с Vue.js

Используйте любую JS библиотеку с Vue.js

От автора: Lodash, Moment, Axios, Async… эти полезные библиотеки JS вы хотели бы использовать во многих своих приложениях Vue.js. Однако по мере роста проекта вы будете разделять код на файл компонентов и файлы модулей. Может, вы захотите запускать приложение на разных машинах, чтобы использовать функцию серверного рендера. Если вы не найдете простой и надежный способ подключить эти JS библиотеки в компоненты и модули, будет неприятно!

Как не стоит подключать библиотеку в Vue.js проект

Глобальная переменная

Наивный способ добавить библиотеку в проект – сделать ее глобальной переменной, прицепив к объекту window:

entry.js

window._ = require('lodash');

MyComponent.vue

export default {
  created() {
 console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

Способ без window переменных долгий, и там не работает серверный рендер. Когда приложение запускается на сервере, объект window будет undefined. Поэтому вы не сможете получить его свойства, вы получите ошибку.

Импорт во все файлы

Еще один второсортный метод – импорт библиотеки во все файлы:

MyComponent.vue

import _ from 'lodash';

export default {
  created() {
 console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
  }
}

Способ работает, но не соблюдается подход DRY, да и сложно это: вам нужно помнить об импорте во все файлы, а также удалять импорт, если вы больше не используете этот файл. Если вы плохо настроите свой билд инструмент, то получите множество копий одной и той же библиотеки в билде.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Способ получше

Самый чистый и надежный способ использовать JS библиотеку в Vue проекте – проксировать его в свойство объекта прототипа Vue. Сделаем это и добавим библиотеку даты и времени Moment в наш проект:

entry.js

import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });

Все компоненты наследуют методы от объекта прототипа Vue, поэтому Moment автоматически доступен сразу во всех компонентах без глобальных переменных или ручных импортов. Библиотека доступна через любой объект/компонент через this.$moment:

MyNewComponent.vue

export default {
  created() {
 console.log('The time is ' . this.$moment().format("HH:mm"));
  }
}

Давайте разберем, как здесь все работает.

Object.defineProperty

Обычно свойство объекта задается так:

Vue.prototype.$moment = moment;

Можно сделать и так, однако с помощью Object.defineProperty мы можем задавать свойство через дескриптор. Дескриптор позволяет устанавливать низкоуровневые детали, такие как возможность перезаписывать свойство, а также возможность видимости при перечислении в цикле for.

Обычно нам такие возможности не нужны, потому что в 99% случаев нам не нужна такая детализация с назначением свойств. Но здесь мы получаем преимущество: свойства, созданные через дескриптор, по умолчанию доступны только для чтения.

Это означает, что какой-то разработчик (возможно, вы) не сможет сделать что-то глупое в компоненте и сломать все:

this.$http = 'Assign some random thing to the instance method';
this.$http.get('/'); // TypeError: this.$http.get is not a function

Наш read-only метод объекта защищает библиотеку. Если вы попробуете перезаписать ее, то получите «TypeError: Cannot assign to read only property».

$

Обратите внимание, что мы проксируем нашу библиотеку в свойство с префиксом $. Вы также можете заметить другие свойства и методы типа $refs, $on, $mount и т.д., у которых тоже есть этот префикс.

Префикс не обязателен, но он добавляется к свойствам как напоминание разработчикам, что это публичное API свойство или метод, в отличие от других свойств объекта, предназначенных для внутреннего использования в Vue.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Язык JS основан на прототипах, поэтому в нем нет реальных классов, а значит, и нет private и public переменных и static методов. Такой тип объявления является мягким заменителем, но мне кажется, стоит его придерживаться.

this

Также обратите внимание, что для работы с библиотекой необходимо использовать this.libraryName, что не удивительно, ведь это теперь метод объекта.

Одно последствие – в отличие от глобальной переменной, вы обязаны знать, что находитесь в правильной области видимости при использовании библиотеки. Внутри колбеков нельзя использовать this.

Колбеки двойными стрелками – хороший способ убедиться, что вы остались в правильной области видимости:

this.$http.get('/').then(res => {
  if (res.status !== 200) {
 this.$http.get('/') // etc
 // Only works in a fat arrow callback.
  }
});

Почему не превратить ее в плагин?

Если планируете использовать библиотеку в нескольких Vue проектах или хотите поделиться ей с миром, можете сделать свой плагин!

Плагин абстрагирует сложность и позволяет просто делать следующее в проекте для добавления выбранной библиотеки:

import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);

Эти две строки позволяют использовать библиотеку в любом компоненте так же, как с Vue Router, Vuex и другими плагинами, использующими Vue.use.

Написание плагина

Сперва создайте файл плагина. В этом примере я сделаю плагин, добавляющий Axios во все объекты Vue и компоненты, поэтому назову файл axios.js.

Главное понять, что плагин должен обладать методом install, принимающим конструкторVue в качестве первого аргумента.

axios.js

export default {
  install: function(Vue) {
 // Do stuff
  }
}

Теперь мы можем использовать наш предыдущий метод для добавления библиотеки в объект прототипа:

axios.js

import axios from 'axios';

export default {
  install: function(Vue,) {
 Object.defineProperty(Vue.prototype, '$http', { value: axios });
  }
}

Метод use объекта – все что нужно, чтобы добавить нашу библиотеку в проект. Например, теперь можно добавить библиотеку Axios:

entry.js

import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin);

new Vue({
  created() {
 console.log(this.$http ? 'Axios works!' : 'Uh oh..');
  }
})

Бонус: необязательные аргументы плагина

Метод install плагина может принимать необязательные аргументы. Некоторым разработчикам не понравится вызывать метод $http объекта Axios, так как обычно дают имя Vue Resource. Поэтому давайте с помощью необязательного аргумента позволим им менять имя:

axios.js

import axios from 'axios';

export default {
  install: function(Vue, name = '$http') {
 Object.defineProperty(Vue.prototype, name, { value: axios });
  }
}

entry.js

import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');

new Vue({
  created() {
 console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
  }
})

Автор: Anthony Gore

Источник: https://vuejsdevelopers.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Курс по Angular 4 NgRx

Прямо сейчас посмотрите курс по Angular 4 NgRx

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree