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

Question 1

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

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

Question 2

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

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

Question 3

내가 사용하고 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')
  }
})

Question 4

저는 주로 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를 확인 하십시오.

Question 5

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

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

Question 6

간단한 질문에 대한 대답은 함수를 포함하는 ES6 모듈 (ANgular의 클래스의 메서드와 동일)이 될 수 있고 ES6 가져 오기 및 내보내기를 사용하여 구성 요소에서 직접 가져올 수 있습니다. 구성 요소에 삽입 할 수있는 이러한 서비스는 없습니다.

Question 7

모든 HTTP 서버 호출을 배치 할 수있는 고유 한 서비스를 만든 다음이를 사용하려는 구성 요소로 가져올 수 있습니다.

Vuex에서는 항상 비동기 적으로 실행되는 작업을 통해 모든 비동기 호출을 처리 할 수 있고 결과가 나오면 돌연변이를 커밋 할 수 있기 때문에 복잡한 상태 관리 애플리케이션에 Vuex를 사용하는 것이 가장 좋습니다 .Mutation은 상태와 직접 상호 작용하고 업데이트됩니다. 변경 불가능한 방식 (선호)으로. 이것은 상태 저장 방식입니다.

다른 접근 방식도 있습니다. 그러나 이것들은 내가 내 코드에서 따르는 것들입니다.