[解決済み] Vue.js: サービスを定義する
質問
私はAngularの代替としてVue.jsを見ていて、今のところ本当に気に入っています。 その感触を得るために、私は既存のAngularプロジェクトをVueプロジェクトにリファクタリングしています。私はちょうど私のREST APIと通信する必要があるポイントにいます。
Angularでは、私はそのためのサービスを定義し、それを必要とするすべてのコントローラに注入していました。Vueは、私が理解しているように、"service"構造を知らないようです。どのようにVueでこれを実現できますか?
私は考えました。
vue-resource
も検討しましたが、私の理解する限りではhttpの機能のみです。jQueryも使っているので、これは時代遅れです。
例です。
私は
vueComponent1
と
vueComponent2
. どちらも同じRESTリソースにアクセスする必要があります。これを処理するために、両方のコンポーネントがRESTリソースへのリクエストに使用できる中央サービスが必要です。Angularには「service」コンポーネントがあり、まさにそれを実現します。Vueにはありません。
どのように解決するのですか?
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();
関連
-
[解決済み] Vue.js - ネストされたデータを適切に監視する方法
-
[解決済み] RESTを理解する。動詞、エラーコード、認証
-
[解決済み] RESTアプリケーションはステートレスであることが前提である場合、セッションはどのように管理するのですか?
-
[解決済み] インポートパスの中の@はどういう意味ですか?
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?