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

[justboris]

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

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

[2developers]

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

[justboris]

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

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

[PaulMaly]

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

[justboris]

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

[PaulMaly]

Все так.

[ioppoi]

спасибо

[b360124]

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]

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

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

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

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

[b360124]

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

[2developers]

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

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