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

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

---

서버와 통신하고 데이터를 VueJS의 재사용 가능한 단일 파일로 가져 오는 모든 기능을 넣고 싶습니다.

플러그인이 최선의 대안이 아닌 것 같습니다. 템플릿이 적은 구성 요소 ..?

---

총 4 가지 방법이 있습니다.

• Stateless 서비스 : 그러면 믹스 인을 사용해야합니다.
• Stateful 서비스 : Vuex 사용
• 서비스 내보내기 및 VUE 코드에서 가져 오기
• 모든 자바 스크립트 전역 객체

---

내가 사용하고 Axios의를 , 내가 만든 API 호출을 만들기위한 HTTP 클라이언트로 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에 메서드를 추가 할 수 있으며 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 Resource를 사용하고 있습니다.

1.를 사용하여 API 끝점에 연결하는 새 파일 Vue.http.xxx을 생성합니다. 게시물을 출력하는 끝 점이 있다고 가정 해 보겠습니다. 프로젝트에 새 디렉터리 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 에서 내 repo를 확인 하십시오.

---

앱 어디에서나 액세스 할 수있는 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
}

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

---

I think for your simple question the answer could be any ES6 module containing functions (equivalent to methods in class in ANgular) and directly importing them in components using ES6 imports and exports. There are no such services that could be injected in components.

---

You can make your own service where you can place all your HTTP server calls and then import that to the components where you want to use them.

Best is to make use of Vuex for complex state management applications because in Vuex you are able to handle all async calls via actions which always run asynchronously and then commit the mutation once you have the result.Mutation will directly interact with the state and will update it in an immutable manner (which is preferred). This is stateful approach.

There are other approaches as well. But these are the ones which I follow in my code.

참고URL : https://stackoverflow.com/questions/41164672/whats-the-equivalent-of-angular-service-in-vuejs