web-dev-qa-db-ja.com

Vue.jsでAPI呼び出しを構成する方法は？

現在、新しいVue.jsアプリケーションに取り組んでいます。バックエンドデータベースへのAPI呼び出しに大きく依存します。

多くの場合、コンポーネント間の共有データを管理するため、Vuexストアを使用します。他のVue githubのプロジェクトを見ると、すべてのアクション、状態などを処理するファイルがある特別なvuexディレクトリがあります。コンポーネントがAPIを呼び出す必要がある場合、アクションが含まれますvuexディレクトリのファイル。

しかし、たとえばメッセージの場合、Vuexを使用したくないのは、それらのデータは特定の1つのビューでのみ重要だからです。ここでコンポーネント固有のデータを使用します。しかし、ここに私の問題があります：私はまだAPIをクエリする必要があります。ただし、Vuexアクションファイルを含めるべきではありません。そのため、新しいアクションファイルを作成する必要があります。このようにして、vuexおよび単一コンポーネントのapiアクションを含む特定のファイルを作成します。

これをどのように構成する必要がありますか？ vuexデータとコンポーネント固有のデータの両方のアクションを処理する新しいディレクトリ「api」を作成しますか？またはそれを分離しますか？

apistructurevue.jsvuex
32
Jordy

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)
  }
}

同様に、これを使用してvuexストアのデータを取得することもできます。

編集済み

製品関連のデータを専用 vuex module で管理している場合、コンポーネントのメソッドからアクションをディスパッチできます。これにより、内部でバックエンドAPIが呼び出され、ストアにデータが入力されます。コードは次のようになります以下：

コンポーネントのコード：

methods: {
 getProducts (prodId) {
     this.$store.dispatch('FETCH_PRODUCTS', prodId)
  }
}

Vuexストアのコード：

import myApi from '../../gateways/my-api'
const state = {
  products: []
}

const actions = {
  FETCH_PRODUCTS: (state, prodId) => {
    myApi.get('products?id=' + prodId).then(response => state.commit('SET_PRODUCTS', response))
  }
} 

// mutations
const mutations = {
  SET_PRODUCTS: (state, data) => {
    state.products = Object.assign({}, response.data)
  }
}

const getters = {
}

export default {
  state,
  mutations,
  actions,
  getters
}
26
Saurabh

注：vue-resourceは廃止されました！ Axiosなど、他のものを使用します。

私は主にVue Resource.Iを使用してservicesディレクトリを作成し、そこにすべての接続をエンドポイントに配置します。たとえば、PostService.js

import Vue from 'vue'

export default {
  get(id) {
    return Vue.http.get(`/api/post/${id}`)
  },
  create() {
    return Vue.http.post('/api/posts') 
  }
  // etc
}

次に、ファイルにそのサービスをインポートし、サービスファイルからメソッドを呼び出すメソッドを作成します

SomeView.vue

import PostService from '../services/PostService'

export default {
  data() {
    item: []
  },
  created() {
    this.fetchItem()
  },
  methods: {
    fetchItem() {
      return PostService.get(to.params.id)
        .then(result => {
          this.item = result.json()
        })
    }  
  }
}
4
Belmin Bedak

Belmin Bedakの答えのコンセプトに基づいて、私はそれをすべてシンプルなライブラリにまとめました。

https://github.com/robsontenorio/vue-api-query

次のようにAPIをリクエストできます。

すべての結果

// GET /posts?filter[status]=ACTIVE

let post = await Post
  .where('status', 'ACTIVE')
  .get()

具体的な結果

// GET /posts/1

let post = await Post.find(1)

編集

// PUT /posts/1 

post.title = 'Awsome!'
post.save()

関係

// GET /users/1
let user = await User.find(1)

// GET users/1/posts
let posts = await user
  .posts()
  .get()
3
Robson Tenório