現在、新しいVue.jsアプリケーションに取り組んでいます。バックエンドデータベースへのAPI呼び出しに大きく依存します。
多くの場合、コンポーネント間の共有データを管理するため、Vuexストアを使用します。他のVue githubのプロジェクトを見ると、すべてのアクション、状態などを処理するファイルがある特別なvuexディレクトリがあります。コンポーネントがAPIを呼び出す必要がある場合、アクションが含まれますvuexディレクトリのファイル。
しかし、たとえばメッセージの場合、Vuexを使用したくないのは、それらのデータは特定の1つのビューでのみ重要だからです。ここでコンポーネント固有のデータを使用します。しかし、ここに私の問題があります:私はまだAPIをクエリする必要があります。ただし、Vuexアクションファイルを含めるべきではありません。そのため、新しいアクションファイルを作成する必要があります。このようにして、vuexおよび単一コンポーネントのapiアクションを含む特定のファイルを作成します。
これをどのように構成する必要がありますか? vuexデータとコンポーネント固有のデータの両方のアクションを処理する新しいディレクトリ「api」を作成しますか?またはそれを分離しますか?
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
}
注: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()
})
}
}
}
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()