Vueは依存性注入（DI）によってコンポーネントを角度のようにインポートできますか？

Question

私はangularjs（1.x）とVueの新機能を使用しました。角度がDIであり、コントローラ内のサービスを参照したり、テンプレート内の指令を簡単に使用することができます。 Angularは自動的に注入するのに役立ちます。

しかし、私はVueのは、私は（頻繁に）リファクタリング時に、コンポーネントが失われます部品direcotry構造を変更in.Ifコンポーネントを参照してください、と私はパスを修正する必要がありimport(ES6)パスでコンポーネントを参照してください実現一つずつ。それはいかに面倒です。

角度DIのようなvue-injectorがあることは知っていますが、使いやすいのですか？

Answer 1

Vueは正式な依存性注入メカニズムを提供しません。依存関係をどのようにインポートするかはあなた次第です。

ほとんどのVueコードサンプルは依存性注入を全く使用せず、importとexportでES6モジュールシステムを使用します。

リファクタリング時（頻繁に）コンポーネントのディレクトリ構造を変更すると、コンポーネント参照が失われ、パスを1つずつ修正する必要があります。それはいかに面倒です。

ディレクトリ構造を頻繁に変更しないでください。 Vueプロジェクトを正しく構成する方法の例については、Vue webpack templateを参照してください。

これは実際にあなたの質問に答えるものではありません。あなたはwebpack（または類似のもの）を使用していますか？ webpackがコンフィグレーションプロパティーresolveを介してモジュールをどのように配置するかを正確に設定することができ、相対的なインポートパスを使用する必要はありません。

別の方法はregister each Vue component globallyです。インポートする必要はありません。

もう1つの方法は、各Vueコンポーネントを（どこにいても）インポートし、その1つのモジュールからすべてエクスポートするモジュールを作成することによってES6モジュールを悪用することです。今度は、インポートしたいそれぞれのモジュールの特定の場所を探し出す代わりに、その中央モジュールからインポートするだけです。

// components.js 

import Button from 'path/to/button.vue'; 
import Alert from 'path/to/alert.vue'; 

export { 
    Button, 
    Alert, 
}; 

// myform.js 

import { Button } from 'path/to/components.js'; 

あなたがbutton.vueの場所を変更する場合は、あなただけのcomponents.jsファイル内からのインポートを更新する必要があります。

Answer 2

あなたがたくさん再構成すると思う場合は、すべての人がインポートする1​​つのファイルを持つことができます。残りのすべてをインポートするので、1つの場所で変更するだけです。

個人的には、依存性注入よりもインポートが好きです。すべてがどこから来ているのかわかりやすい方法です。