Перевод от автора.
На мой взгляд, официальная документация nuxt.js точно не раскрывает, как правильно внедрять плагины в ваше приложение, поэтому я хочу рассказать вам об этом подробнее.
Во-первых, я покажу, какие НЕ правильные реализации я встречал на своем пути разработки.
Внимание, это НЕ правильная реализация!
Vue.use({ install(Vue) { // here the plugin is initialized // then added to the prototype Vue under $plugin allias Vue.prototype.$plugin = $plugin } }) // Then, a function is imported that returns the plugin itself // this is required for the asynchronous require of the plugin. export default () => $plugin
И даже встречал такое изобретение.
Внимание, это тоже НЕ правильная реализация!
export default { install (Vue) { // Here the global Vue is polluted // in the plugins we have access to the plugin // under the allias plugin // in components after initializing Vue, under $plugin Vue.prototype.$plugin = Vue.plugin = plugin } }
Хорошо, давайте найдем правильное решение, вот пример из официальной документации, но, как видите, не самое обширное объяснение.
import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) export default ({ app }, inject) => { // In this case, we added a plugin to our application and this // will give the opportunity to get it from middleware and on pages // in asyncData/fetch app.i18n = new VueI18n() }
Но есть еще одна проблема: как получить доступ к плагину i18n из другого плагина?
Например, у меня есть плагин, который показывает уведомления на страницах, и я хочу отображать переведенные уведомления.
Если вы подумали о простой импорт, то он не работает из-за асинхронного требования плагинов. Во время запроса уведомлений плагина плагин перевода, вероятно, еще не импортирован, и вы получите undefined.
Здесь нам поможет функция inject, которая входит во второй параметр и которую вам нужно вызвать с двумя параметрами, чтобы «внедрить» плагин.
Первый параметр - имеет тип String. Это имя нашего плагина, к которому будет добавлен префикс $, наш плагин будет доступен в ctx.app. $ PluginName в плагинах и this. $ PluginName в компонентах.
Второй параметр - имеет тип функции . Это реализация нашего плагина (функция, которая будет выполняться при вызове this. $ PluginName ()).
Внимание, правильная реализация, на случай, если вам нужен доступ к одному плагину в другом.
Перепишем официальный пример для:
export default (ctx, inject) => { inject('i18n', new VueI18n()) }
Теперь в плагине, где вам нужен плагин переводчика, у нас есть такой доступ:
export default ({ app }) => { app.$i18n() // its works, cool! }
Что ж, если вам не нужен доступ к вашему вновь созданному плагину из других плагинов, тогда мы сделаем это, как показано в официальной документации:
export default ({ app }) => { // Will be available in the components as this.$i18n app.i18n = new VueI18n() }
Чао!