web-dev-qa-db-ja.com

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

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

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

vue-resourceを検討しましたが、理解できる限りはhttp機能のみを対象としています。私もjQueryを使用しているため、これは廃止されました。

例：

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

javascriptrestvue.js
65
Herr Derb

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

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

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

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();
82
Marc

Building Large-Scale Apps のVue.jsドキュメントから。

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

Vueは、MVCまたはMVVMアーキテクチャのビューレイヤーのみを参照するため、特定のアーキテクチャに従う必要はありません。 @ Marc で his answer で既に述べたように、別のファイルに「サービス」を作成してインポートできるように、BrowserifyやWebpackなどのモジュールローダーを使用することをお勧めします必要な場所。 vue-cli を使用してモジュールローダーでアプリを構築するのは非常に簡単です。

確かに、私は Flux コンポーネントベースのアプリのアーキテクチャが本当に好きなので、 Vuex を見てみることをお勧めします。 Vue.jsアプリ内の状態を管理します。

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

19
Erick Petrucelli

この質問には非常に良い答えがあります VueJSのAngular Serviceと同等のものは何ですか？

@Otabek Kholikovがそこに言っているように-あなたには4つのオプションがあります：

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

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

10
Alexander

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

export default new class {
   ...
}

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

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

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

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

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をプラグインする方法を示しています

5
Michael Tranchida

vueリソースをグローバルに設定できます

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

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

this.$http.get('');
this.$http.get('users')
0
Sourabh Ranka