Обзор фреймворков внедрения зависимостей Vue 2.

Согласно списку репозитория Awesome Vue, https://github.com/vuejs/awesome-vue существует два альтернативных модуля внедрения зависимостей Vue.

Vue-container - простая библиотека внедрения зависимостей для Vue 2.
Vue-inject - Внедрение зависимостей для компонентов Vue 2.x

Давайте сравним их.

Пример использования Vue-контейнера.

import Vue from 'vue';
//Register vue-container with Vue
import Vuec from 'vue-container';
Vue.use(Vuec);
//Register axios in DI container
import Axios from 'axios';
Vue.$ioc.register('Axios', Axios);
//Manually get axios from DI container
const Axios = Vue.$ioc.resolve('Axios');
//Automatically inject axios in this.$services.axios
new Vue({
    services: ['$axios'],
    mounted() {
        // the axios service is available under 
    }
})
//Automatically inject axios as lifecycle function argument
new Vue({
    mounted(axios) {
    }});
})

Пример использования Vue-inject:

import Vue from 'vue';
//Register vue-injector with Vue
import injector from 'vue-inject';
Vue.use(injector);

//Register number in DI container
injector.constant('three', 3);
//Register factory which makes a function to sum 3 with any number
injector.factory('threeAdder', 'three', function (three){
  return function(number){
    return three + number;
  }
});
//Register service which provides a method to add 3 with any number
injector.service('myService', ['threeAdder'], function (threeAdder){
    this.addToThree = function(addWhat) {
        return threeAdder(addWhat);
    }
});
//Manually get service myService
const myService = injector.get('myService');
myService.addToThree(2);
//Inject something to a component
const component =  {
  ...
  dependencies : ['myFactory']
};
//Inject stuff to every component
Vue.prototype.dependencies = ['myService'];

Итак, к заключению.

Vue-component - это очень легкая структура DI, которая позволяет вам регистрировать и вручную или автоматически вводить что-либо в любом месте.

Vue-inject немного более функциональный, он позволяет все, что делает vue-component. Но также он вводит простую реализацию службы / фабрики / константы с поддержкой автоматической инъекции (в виде аргументов) ранее зарегистрированных сущностей, что делает ее очень похожей на стиль инжектора зависимостей Angular.

Я бы рекомендовал использовать Vue-component, если вам нужно очень простое, но элегантное решение DI для вашего приложения, и Vue-inject, если вам не хватает инъекций в стиле Angular или просто нужно что-то более универсальное.

Обзор фреймворков внедрения зависимостей Vue 2.

Вопросы по теме