2developers Sep 21 2018 at 12:39

Как организовать ваши зависимости во Vue-приложении

7 min

19K

JavaScript *VueJS *

+10

Comments 12

justboris Sep 21 2018 at 21:04

А в чем смысл навешивания разнообразных плагинов на центральный объект? Можно же просто импортировать библиотеки по месту использования – сразу будет понятно что откуда тянется.

Мне кажется от миксинов в прототипы отказались сразу после jQuery, с его системой плагинов через jQuery.fn.functionName

2developers Sep 22 2018 at 16:43

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

justboris Sep 22 2018 at 18:02

Отсутствие лишний писанины это хороший аргумент.

Но с другой стороны, без явных прописанных импортов будет сложно отследить, где используется какая-то библиотека. А это нужно, когда проводится апгрейд версии, или чтобы удалить библиотеку после рефакторинга.

PaulMaly Sep 22 2018 at 17:51

Мне кажется зависит от того должна ли бы зависимость синглтоном с общим для приложения стейтом (например router) или же это просто набор утилит.

justboris Sep 22 2018 at 17:59

Все верно. Для центровых штук, вроде vue-router или vuex это уместно. А вот простым утилитам эта магия ни к чему.

PaulMaly Sep 22 2018 at 18:05

Все так.

ioppoi Sep 23 2018 at 06:38

спасибо

UFO just landed and posted this here

b360124 Sep 24 2018 at 13:20

1) В модуле axios.js, не дописан inject

 inject('http', axios);

2) Почему плагин не добавить канонически, как по доках

Вот как у меня все получилось

plugins/index.js

import Vue from 'vue';

import axios from './axios';

import wait from './wait';



export default function (app) {



let inject = (plugin) => {

 Object.assign(app.store, plugin);

 Vue.use({install(Vue) { Object.assign(Vue.prototype, plugin)}});

 }



axios(app, inject);

 wait(app, inject);

}

wait.js

export default function ({store: {dispatch, getters}}, inject) {

 const $wait = {

 ...

 };



inject( { $wait } );

}

2developers Sep 24 2018 at 14:40

1) Конкретно в моем проекте нет необходимости делать inject для axios. Вызовы API я храню отдельно, в компонентах и сторе this.$axios я не использую. В статье пример с axios был с целью показать конфигурирование библиотек внутри плагинов, а не Dependency Injection в корневой экземпляр Vue.

2) Такой способ из документации у меня не сработал, это упомянуто в статье.

Vue.prototype.$myMethod = function (methodOptions) {
    // некоторая логика ...
}

Делать Object.assign в функции install вместо простого присваивания не пробовал.

b360124 Sep 24 2018 at 19:33

ну так там же не просто присваивание прототипу нового метода, а там идет через создание объекта с методом install, уже в котором идет присваивание прототипа, который уже подключается через
Vue.use(...)
Это реально рабочий вариант, не только у меня. Попробуйте, таким способом сделать и тогда заработает.

2developers Sep 25 2018 at 11:04

Да, именно так и пробовал в первый раз. Создать плагин с методом install. И там сделать это присвоение. Очень удивился, что не заработало, очевидных косяков не обнаружилось, поэтому начал смотреть, как сделано у других.

Оба варианта — с миксином из vue-wait и с Object.defineProperty из Nuxt заработали сразу. И они мало похожи на то, что описано в документации. Вероятно, не без причины.
Как-нибудь попробую ваш вариант, спасибо.