[service] VueJS의 Angular Service에 해당하는 것은 무엇입니까?

앱 어디에서나 액세스 할 수있는 API 공급자를 만드는 것이 좋습니다.

src/utils폴더를 만들고 그 안에 api.js.

여기에서 API와 통신하는 방법을 객체 또는 ES6 정적 클래스로 아는 래퍼를 내 보냅니다 (클래스를 두려워하지 않는 경우 후자가 어떻게 보이고 작동하는지 선호합니다). 이 공급자는 원하는 모든 HTTP 요청 라이브러리를 사용할 수 있으며 전체 코드베이스를 검색하는 대신 단일 파일 (이 파일)을 변경하여 나중에 쉽게 교체 할 수 있습니다. 다음 api.example.com/v1은 SSL을 사용 하는 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
}

도움이 되었기를 바랍니다.