VueJSのAngular Serviceに相当するものは何ですか？

Question

VueJSでは、サーバーと通信してデータを1つの再利用可能なファイルにフェッチするすべての機能を追加したいと考えています。

プラグインは最適ではないようです。テンプレートの少ないコンポーネント..？

Answer 1

私はAPI呼び出しを行うためにHTTPクライアントとしてaxiosを使用しています、私は私のsrcフォルダにgatewaysフォルダを作成していると私は

myApi.js

を以下のように、 axios instancesを作成し、各バックエンド用のファイルを入れています

import axios from 'axios' 
export default axios.create({ 
    baseURL: 'http://localhost:3000/api/v1', 
    timeout: 5000, 
    headers: { 
    'X-Auth-Token': 'f2b6637ddf355a476918940289c0be016a4fe99e3b69c83d', 
    'Content-Type': 'application/json' 
    } 
}) 

今すぐあなたのコンポーネントで、あなたは次のようなAPIからデータをフェッチする機能を持つことができます。

methods: { 
getProducts() { 
    myApi.get('products?id=' + prodId).then(response => this.product = response.data) 
    } 
} 

私はあなたが複数のコンポーネントでこのメソッドを再利用したいと仮定したよう

---

、あなたはvue.jsのmixinsを使用することができます。

は

ミックスインは、Vueのコンポーネントのための再利用可能な機能を配布するための柔軟な方法です。 mixinオブジェクトには、任意のコンポーネントオプションを含めることができます。コンポーネントがmixinを使用する場合、mixinのすべてのオプションは、コンポーネントの独自のオプションに「混合」されます。

mixinにメソッドを追加すると、mixinが混在するすべてのコンポーネントで利用できるようになります。

// define a mixin object 
var myMixin = { 
    methods: { 
    getProducts() { 
     myApi.get('products?id=' + prodId).then(response => this.product = response.data) 
     } 
    } 
} 

// define a component that uses this mixin 
var Component = Vue.extend({ 
    mixins: [myMixin] 
}) 

// alternate way to have a mixin while initialising 
new Vue({ 
    mixins: [myMixin], 
    created: function() { 
    console.log('other code') 
    } 
}) 

Answer 2

は4通りの方法があります。次の例を参照してください

• ステートレスサービス：あなたはミックスインを使用する必要があります
• ステートフルサービス：VUEコード
からVuex
• 輸出サービスおよびインポートを使用
• すべてのjavascriptグローバルオブジェクト

Answer 3

私は主にVueリソースを使用しています。

1.Iは、私はそれservicesを呼び出し、その後、PostsService.jsと呼ばれるファイルを作成し、私は、我々はあなたのプロジェクトにその出力posts.Create新しいディレクトリをエンドポイントとしましょう。だからVue.http.xxxを使用してAPIエンドポイントへの接続を行う、新しいファイルを作成します - 内容は次のようになります。

import Vue from 'vue' 

export default { 
    get() { 
    return Vue.http.get('/api/posts) 
    } 
} 

それから私はGitHubの上で私のレポをチェックすること自由に感じ、私はこのサービスを使用するコンポーネントに行き、そしてそれを、このアプローチについての詳細情報については

import PostsService from '../services/PostsService' 

export default { 
    data() { 
    return { 
    items: [] 
    } 
    }, 
    created() { 
    this.fetchPosts() 
    }, 
    methods: { 
    fetchPosts() { 
    return PostsService.get() 
     .then(response => { 
     this.items = response.data 
     }) 
    } 
    } 
} 

をインポートhttps://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app