Vue.js：サービスを定義する

Question 1

私はAngularの代わりとしてVue.jsを見ていますが、これまでのところ本当に気に入っています。その感覚をつかむために、私は既存のAngularプロジェクトをVueプロジェクトにリファクタリングしています。私はRESTAPIと通信する必要があるところです。

Angularでは、そのためのサービスを定義していました。それは、それを必要とするすべてのコントローラーに注入されました。私が理解しているように、Vueは「サービス」構造を知らないようです。これはVueでどのように達成できますか？

私は考えましたがvue-resource、私が理解している限り、それはhttp機能のためだけです。私もjQueryを使用しているので、これは廃止されました。

例：

私は持っvueComponent1ていvueComponent2ます。どちらも同じRESTリソースにアクセスする必要があります。これを処理するには、両方のコンポーネントがRESTリソースへの要求に使用できる中央サービスが必要です。Angularには「サービス」コンポーネントがあり、まさにそれを実行します。Vueはしていません。

Question 2

Vue.jsのドキュメントから。

Vue.js自体は本格的なフレームワークではなく、ビューレイヤーのみに焦点を当てています。

MVCのVに焦点を当てたライブラリとして、サービスなどは提供していません。

BrowserifyやWebpackなどのモジュールローダーを使用していますか？
次に、ES6のモジュールシステムを活用して、すべて自分でサービスを作成できます。
あなたがしなければならないのは、この新しいモジュールによってエクスポートされているプレーンなJavaScriptクラスを作成することです。

例は次のようになります。

export default class RestResource {

  sendRequest() {
    // Use vue-resource or any other http library to send your request
  }

}

vueコンポーネント1および2内で、クラスをインポートすることでこのサービスを使用できます。

import RestResource from './services/RestResource';

const restResourceService = new RestResource();

restResourceService.sendRequest();

Question 3

大規模アプリの構築に関するVue.jsのドキュメントから。

コミュニティは、RESTfulAPIを操作する簡単な方法を提供するvue-resourceプラグインを提供しています。$ .ajaxやSuperAgentなど、好きなAjaxライブラリを使用することもできます。

Vueは、MVCまたはMVVMアーキテクチャのビューレイヤーのみを参照するため、特定のアーキテクチャに従う必要はありません。以下のよう@Marcは、すでに述べた彼の答え、良い練習はあなたが必要なところ、彼らのインポート、別々のファイルにあなたの「サービス」を作成できるようにBrowserifyまたはWebPACKのようなモジュールローダを使用することです。vue-cliを使用してモジュールローダーでアプリを構築するのは非常に簡単です。

確かに、私は個人的にコンポーネントベースのアプリのFluxアーキテクチャが本当に好きです。次に、Vue.jsアプリ内の状態を管理するために特別に設計されたFluxに触発されたアプリケーションアーキテクチャであるVuexを確認することをお勧めします。

このようにして、vue-resourceを使用してAPIをリクエストするアクションを作成し、データが到着したときにミューテーションをディスパッチできます。そのデータを必要とするすべてのコンポーネントは、すでにグローバル状態にバインドされており、自動的に反応します。つまり、コンポーネント自体がサービスを呼び出す必要はなく、Mutationsによってディスパッチされた状態の変更に反応するだけです。

Question 4

サービスのクラスのインスタンスをエクスポートできます。

export default new class {
   ...
}

コンポーネントまたはその他の場所で、インスタンスをインポートでき、常に同じインスタンスを取得できます。このように、注入されたAngularサービスと同様に動作しthisますが、を使用しません。

import myService from '../services/myservice';

Vue.component('my-component', {
  ...
  created: function() {
    myService.oneFunction();
  }
  ...
})

Question 5

この質問には、非常に良い答えがいくつかあります。VueJSのAngular Serviceに相当するものは何ですか？

@Otabek Kholikovが言うように、4つのオプションがあります。

ステートレスサービス：ミックスインを使用する必要があります
ステートフルサービス：Vuexを使用する
サービスのエクスポートとVUEコードからのインポート
任意のjavascriptグローバルオブジェクト

私のプロジェクトでは（4）が好きです。それは私に最大の柔軟性を与え、私が必要とする実装だけを持っています（私は例えばVuexを持ってこないので、そのルールに厳密であるべきではなく、「魔法」はありません-すべてのコードは私のものです）。上記の質問に実装例があります。

Question 6

モジュールローダーを使用していない場合は、カスタムプラグインを定義できます。いくつかのサンプルコード：

var myPlugin = {
        install: function (Vue, options) {
            //private
            var myPrivateProperty = 'Private property';

            //instance properties and methods
            Vue.prototype.$myPublicProperty = 'Public Property';

            Vue.prototype.$myAddedMethod = function () {
                return myPrivateProperty;
            };
            Vue.prototype._getData = function (url) {
                return url;
            };

            //static properties and methods
            Vue.myStaticProperty = 'My static prop';
            Vue.myStaticMethod = function () {
                console.log('in');
            }
        }
    };

    Vue.use(myPlugin);

    new Vue({
        el: '#app',
        created: function () {
            //using instance
            console.log(this.$myAddedMethod());
            console.log('my get data: ' + this._getData('some url'));
            console.log(this.$myPublicProperty);

            //using static
            console.log(Vue.myStaticProperty);
            Vue.myStaticMethod();
        }
    });

他のライブラリをプラグインすることもできます。この投稿では、axios.jsをプラグインする方法を示しています。

Question 7

vueリソースをグローバルに次のように構成できます

Vue.http.options.root = "your base url"

そして今、すべてのhttp呼び出しで、リソースの名前で簡単に呼び出すことができます-

this.$http.get('');
this.$http.get('users')