(Примечание: это одна из статей, написанных в серии разработок на основе плагинов vue. Если вы новичок, ознакомьтесь со всей историей, или, если вы хотите знать только о создании плагина vue, пожалуйста, продолжайте)

Вы когда-нибудь использовали vue.use (router)? Любое приложение vue может использовать подключаемый модуль маршрутизатора. Создать плагин довольно просто. Наш входной файл должен экспортировать метод по умолчанию install. Давайте посмотрим на наш файл index.js, наш один из подключаемых модулей.

export default {
     install(Vue, options) {
        //Where Vue is the global vue instance and 
        //options are extra parameters we pass while using plugin 
        //Vue.canAddGlobalMethods = () => {} 
        //Vue.directive('my-directive.....
        //mixins, instances and many more
     }
};

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

Поскольку в нашем путешествии мы создаем полноценное приложение vue в виде плагина, нам нужно найти способ расширить основные маршруты приложения, store (также i18n). Параметр Vue внутри метода установки - это глобальный экземпляр, не имеющий никакого контекста для маршрутов и хранилища приложений. Итак, кто бы ни использовал наш плагин, он должен передать следующие свойства.

Vue.use(newsfeed, {
    router: router,
    store: store,
    i18n: i18n,
});

Нам нужен маршрутизатор потребительского приложения, store & i18n, чтобы мы могли расширить их следующим образом:

Итак, мы добавляем маршруты с помощью addRoutes, сохраняем с помощью registerModule и i18n с помощью mergeLocaleMessage . Это методы, предоставляемые отдельными плагинами. Вот как выглядит router.js и store.js внутри плагинов

(Примечание: если вы заметили, что мы не экспортируем новый Vuex.Store () для магазина, а также новый маршрутизатор для маршрутизатора. Вместо этого мы просто экспортируем наши простые маршруты и хранилище, которое мы расширяем с помощью маршрута и хранилища приложения)

Резюме

Мы внедрили полное приложение (маршруты, магазин и i18n) в другое приложение. Таким образом, любое приложение vue может установить наш пакет и использовать его, передав необходимую информацию.

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