web-dev-qa-db-ja.com

VueJSのAngular Serviceと同等のものは何ですか？

サーバーと通信してデータを取得するすべての関数をVueJSの単一の再利用可能なファイルに入れたいと思います。

プラグインは最良の選択肢ではないようです。テンプレートレスコンポーネント..？

servicevue.jsvuejs2
74
Faizuddin Mohammed

合計で4つの方法があります。

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

API呼び出しを行うためのHTTPクライアントとして axios を使用しています。gatewaysフォルダーにsrcフォルダーを作成し、各バックエンドにファイルを配置して、 axiosインスタンス を作成します。以下

myApi.js

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が混合されるすべてのコンポーネントで使用できるようになります。次の例を参照してください。

// 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')
  }
})
33
Saurabh

ほとんどVueリソースを使用しています。

1. Vue.http.xxxを使用してAPIエンドポイントに接続する新しいファイルを作成します。投稿を出力するエンドポイントがあるとしましょう。プロジェクトに新しいディレクトリを作成し、servicesと呼び、PostsService.jsというファイルを作成します。 ：

import Vue from 'vue'

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

次に、このサービスを使用するコンポーネントに移動し、インポートします

import PostsService from '../services/PostsService'

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

このアプローチの詳細については、GitHubのレポジトリを自由に確認してください https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app

28
Belmin Bedak

アプリのどこからでもアクセスできるAPIプロバイダーを作成することをお勧めします。

src/utilsフォルダーを作成し、その中にapi.jsというファイルを作成します。

その中で、オブジェクトまたはES6静的クラスとしてAPIと通信する方法を知っているラッパーをエクスポートします（クラスを恐れない場合は、後者がどのように見えて動作するかを好みます）。このプロバイダーは、好きなHTTPリクエストライブラリを使用できます。コードベース全体を探し出すのではなく、1つのファイル（このファイル）を変更するだけで、後で簡単に交換できます。 SSLを使用するapi.example.com/v1で利用可能なREST AP​​Iがあると仮定して、axiosの使用例を次に示します。

import axios from 'axios'

import { isProduction, env } from '@/utils/env'

const http = null // not possible to create a private property in JavaScript, so we move it outside of the class, so that it's only accessible within this module

class APIProvider {
  constructor ({ url }) {
    http = axios.create({
      baseURL: url,
       headers: { 'Content-Type': 'application/json' }
    })
  }

  login (token) {
    http.defaults.headers.common.Authorization = `Bearer ${token}`
  }

  logout () {
    http.defaults.headers.common.Authorization = ''
  }

  // REST Methods
  find ({ resource, query }) {
    return http.get(resource, {
      params: query
    })
  }

  get ({ resource, id, query }) {
    return http.get(`${resource}/${id}`, {
      params: query
    })
  }

  create ({ resource, data, query }) {
    return http.post(resource, data, {
      params: query
    })
  }

  update ({ resource, id, data, query }) {
    return http.patch(`${resource}/${id}`, data, {
      params: query
    })
  }

  destroy ({ resource, id }) {
    return http.delete(`${resource}/${id}`)
  }
}

export default new APIProvider({
  url: env('API_URL')  // We assume 'https://api.example.com/v1' is set as the env variable
})

次に、main.jsファイルまたは他の場所でbootstrap Vueアプリで、以下を実行します。

import api from '@/src/utils/api'

Vue.$api = api

Object.defineProperty(Vue.prototype, '$api', {
  get () {
    return api
  }
})

これで、Vueアプリのどこからでも、Vue自体をインポートしたどこからでもアクセスできます。

<template>
  <div class="my-component">My Component</div
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      data: []
    }
  },
  async created () {
    const response = await this.$api.find({ resource: 'tasks', query: { page: 2 } })

    this.data = response.data
  }
}
</script>

または：

// actions.js from Vuex
import Vue from 'vue'

export async function fetchTasks ({ commit }) {
  const response = await Vue.$api.find({ resource: 'tasks', query: { page: 2 } })

  commit('SAVE_TASKS', response.data)

  return response
}

お役に立てれば。

3
techiedod

あなたの簡単な質問に対する答えは、関数（Angularのクラスのメソッドに相当）を含み、ES6インポートおよびエクスポートを使用してコンポーネントに直接インポートするES6モジュールであると思います。コンポーネントに注入できるサービスはありません。

2
Sourabh Ranka

すべてのHTTPサーバー呼び出しを発信できる独自のサービスを作成し、それを使用するコンポーネントにインポートできます。

Vuexでは、常に非同期で実行されるアクションを介してすべての非同期呼び出しを処理でき、結果が得られたら突然変異をコミットできるため、複雑な状態管理アプリケーションにVuexを使用することが最善です。不変の方法で（これが望ましい）。これはステートフルなアプローチです。

他のアプローチもあります。しかし、これらは私のコードで従うものです。

0
Prateek Madaan