Автор оригинала: Anthony Gore.
Лоташ, момент, Axios, Async … Это полезны библиотеки JavaScript, которые вы захотите использовать во многих ваших приложениях Vue.js.
Но по мере роста вашего проекта вы будете разделить код в одном файловых компонентах и модульных файлах. Вы также можете захотеть запустить свое приложение в разных средах, чтобы разрешить рендеринг серверов.
Если вы не найдете легкий и надежный способ включить эти библиотеки JavaScript через ваши компоненты и модульные файлы, они будут неприятными!
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/04/24.
Как не включать библиотеку в проекте Vue.js
Глобальная переменная
Наивный способ добавить библиотеку в ваш проект – сделать его глобальной переменной, прикрепив ее к окно
объект:
entry.js.
window._ = require('lodash');
Mycomponent.vue.
export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..'); } }
Случай против переменных окон составляет длинный, но, в частности, к этому обсуждению, они не работают с рендерингом сервера. Когда приложение работает на сервере окно
Объект будет неопределен и поэтому попытка получить доступ к недвижимости закончится с ошибкой.
Импорт в каждом файле
Другой метод второго уровня – импортировать библиотеку в каждый файл:
Mycomponent.vue.
import _ from 'lodash'; export default { created() { console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..'); } }
Это работает, но это не очень сухое, и в основном просто боль: вы должны помнить, чтобы импортировать его в каждый файл, и снова удалить его, если вы прекратите использовать его в этом файле. И если вы не настроите свой инструмент сборки правильно, вы можете в конечном итоге с несколькими копиями одной библиотеки в вашей сборке.
Лучший путь
Самый чистый и самый устойчивый способ использовать библиотеку JavaScript в проекте Vue, заключается в том, чтобы прокси его свойство объекта Vue Prototype. Давайте сделаем это, чтобы добавить момент момента и времени библиотеки времени в наш проект:
entry.js.
import moment from 'moment'; Object.definePrototype(Vue.prototype, '$moment', { value: moment });
Поскольку все компоненты наследуют свои методы от объекта Vue Prototype, это заметят момент автоматически доступным по любым и всем компонентам без глобальных переменных или чего-либо для импорта вручную. Это может быть доступно просто в любом случае/компонент от Это. $ момент
:
Mynewcomponent.vue.vue.
export default { created() { console.log('The time is ' . this.$moment().format("HH:mm")); } }
Давайте найди время, чтобы понять, как это работает.
Объект.defineproperty.
Мы обычно устанавливаем свойство объекта, как это:
Vue.prototype.$moment = moment;
Вы могли бы сделать это здесь, но, используя Объект.defineproperty
вместо этого мы можем определить нашу собственность с дескриптор Отказ Дескриптор позволяет нам устанавливать некоторые низкоуровневые детали, такие как наша собственность записана, и отображается ли она во время перечисления в A для
петля и многое другое.
Мы обычно не беспокоимся с этим в нашей дневной JavaScript, потому что 99% времени нам не нужен этот уровень детализации с назначением свойства. Но здесь это дает нам четкое преимущество: свойства, созданные с дескриптором только для чтения по умолчанию.
Это означает, что некоторые-лишенный кофе разработчик (вероятно, вы) не смогут сделать что-то глупо, как это в компоненте, и все разбите:
this.$http = 'Assign some random thing to the instance method'; this.$http.get('/'); // TypeError: this.$http.get is not a function
Вместо этого наш метод экземпляра только для чтения защищает нашу библиотеку, и если вы попытаетесь перезаписать его, вы получите «TypeError: нельзя назначить только для чтения свойство».
$
Вы заметите, что мы прокси нашей библиотеке на имя недвижимости, префиксированные с знак доллара « ,
Пока не требуется, префикс добавляется к свойствам, чтобы напомнить лишеному кофе разработчиков (снова), что это общедоступное свойство или метод или метод общественного API, который вы можете использовать, в отличие от других свойств экземпляра, которые, вероятно, просто для Vue внутреннее использование.
Будучи языком на основе прототипа, в JavaScript нет (реальных) классов, поэтому у него нет «частных» и «публичных» переменных или «статических» методов. Эта конвенция – это мягкая замена, которую я думаю, стоит следовать.
это
Вы также заметите, что использовать библиотеку, которую вы используете Это .LibraryName
Что, вероятно, не является сюрпризом, поскольку теперь он является методом экземпляра.
Одним из следствий этого, хотя это в отличие от глобальной переменной, вы должны убедиться, что вы находитесь в правильном объеме при использовании вашей библиотеки. Внутренние методы обратного вызова Вы не можете получить доступ к это
что ваша библиотека обитает.
FAT Arrow Callbacks – это хорошее решение, чтобы убедиться, что вы остаетесь в правильном объеме:
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 Mar Router, Vuex и другими плагинами, которые используют Vue.use
Отказ
Написание плагина
Во-первых, создайте файл для вашего плагина. В этом примере я сделаю плагин, который добавляет Axios для всех ваших экземпляров и компонентов Vue, поэтому я позвоню файлу Axios.js Отказ
Главное понять, что плагин должен разоблачить Установить
Метод, который принимает конструктор 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 }); } }
использовать
Метод экземпляра – это все, что нам теперь нужно добавить нашу библиотеку в проект. Например, теперь мы можем добавить библиотеку Axio так же легко:
entry.js.
import AxiosPlugin from './axios.js'; Vue.use(AxiosPlugin); new Vue({ created() { console.log(this.$http ? 'Axios works!' : 'Uh oh..'); } })
Бонус: плагин Дополнительные аргументы
Ваш метод установки плагина может принимать необязательные аргументы. Некоторые разработки могут не хотеть принять метод экземпляра Axios $ http
Поскольку 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..'); } })
Стать старшим Vue Developer в 2020 году.
Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.
Учить больше