サーバーと通信してデータをフェッチするすべての関数をVueJSの単一の再利用可能なファイルに配置したいと考えています。
プラグインは最善の選択肢ではないようです。テンプレートの少ないコンポーネント..？
サーバーと通信してデータをフェッチするすべての関数をVueJSの単一の再利用可能なファイルに配置したいと考えています。
プラグインは最善の選択肢ではないようです。テンプレートの少ないコンポーネント..？
回答:
合計で4つの方法があります。
私は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のミックスインを使用できます。
ミックスインは、Vueコンポーネントの再利用可能な機能を配布するための柔軟な方法です。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')
}
})
私はほとんどVueリソースを使用しています。
1.を使用してAPIエンドポイントに接続する新しいファイルを作成しますVue.http.xxx.postsを出力するエンドポイントがあるとしましょう。プロジェクトに新しいディレクトリを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で私のリポジトリを確認してください。
アプリのどこからでもアクセスできるAPIプロバイダーを作成することをお勧めします。
src/utilsフォルダを作成し、その中にと呼ばれるファイルを作成しますapi.js。
その中で、APIとオブジェクトまたはES6静的クラスとして通信する方法を知っているラッパーをエクスポートします（クラスを恐れない場合は、後者がどのように表示され、機能するかを好みます）。このプロバイダーは任意のHTTPリクエストライブラリを使用でき、コードベース全体を探すのではなく、単一のファイル（このファイル）を変更することで後で簡単に交換できます。api.example.com/v1SSLを使用するREST APIが利用可能であると想定して、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ファイルまたは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
}
お役に立てれば。
すべてのHTTPサーバー呼び出しを配置できる独自のサービスを作成し、それを使用するコンポーネントにインポートできます。
複雑な状態管理アプリケーションにVuexを使用するのが最善です。Vuexでは、常に非同期で実行されるアクションを介してすべての非同期呼び出しを処理し、結果が得られたらミューテーションをコミットできます。ミューテーションは状態と直接対話し、更新されます不変の方法で（それが推奨されます）。これはステートフルなアプローチです。
他のアプローチもあります。しかし、これらは私のコードで従うものです。