Vue.js : 서비스 정의

Vue.js : 서비스 정의

---

Angular의 대안으로 Vue.js를보고 있는데 지금까지 정말 마음에 듭니다. 느낌을 얻기 위해 기존 Angular 프로젝트를 Vue 프로젝트로 리팩토링하고 있습니다. REST API와 통신해야하는 시점에 있습니다.

Angular에서 나는 그것을 필요로하는 모든 컨트롤러에 주입 된 서비스를 정의했습니다. Vue는 내가 이해하는 "서비스"구조를 모르는 것 같습니다. Vue에서 어떻게 이것을 달성 할 수 있습니까?

나는 고려 vue-resource했지만 내가 이해하는 한 http 기능에만 해당됩니다. 내가 jQuery도 사용하기 때문에 이것은 쓸모가 없습니다.

예:

나는 vueComponent1및 vueComponent2. 둘 다 동일한 REST 리소스에 액세스해야합니다. 이를 처리하기 위해 두 구성 요소 모두 REST 리소스에 대한 요청에 사용할 수있는 중앙 서비스가 필요합니다. Angular에는 '서비스'구성 요소가 있습니다. Vue는 그렇지 않았습니다.

---

Vue.js 문서에서.

Vue.js 자체는 본격적인 프레임 워크가 아니며 뷰 레이어에만 집중되어 있습니다.

V out of MVC에 초점을 맞춘 라이브러리로서 서비스와 같은 것을 제공하지 않습니다.

Browserify 또는 Webpack과 같은 일종의 모듈 로더를 사용하고 있습니까?
그런 다음 ES6의 모듈 시스템을 활용하여 혼자서 서비스를 만들 수 있습니다.
이 새 모듈에서 내보내는 일반 JavaScript 클래스를 작성하기 만하면됩니다.

예는 다음과 같습니다.

export default class RestResource {

  sendRequest() {
    // Use vue-resource or any other http library to send your request
  }

}

vue 컴포넌트 1과 2 내에서 클래스를 가져 와서이 서비스를 사용할 수 있습니다.

import RestResource from './services/RestResource';

const restResourceService = new RestResource();

restResourceService.sendRequest();

---

대규모 앱 빌드 에 대한 Vue.js 문서에서 .

커뮤니티는 RESTful API로 작업하는 쉬운 방법을 제공하는 vue-resource 플러그인을 제공했습니다. $ .ajax 또는 SuperAgent 와 같이 원하는 Ajax 라이브러리를 사용할 수도 있습니다 .

Vue는 MVC 또는 MVVM 아키텍처의보기 계층 만 참조하므로 특정 아키텍처를 따를 필요가 없습니다. 으로 @Marc은 이미 말했다 그의 대답 , 좋은 연습은 별도의 파일에 "서비스"를 만들 수 있도록 당신이 필요로 어디를 가져, Browserify 또는 웹팩 같은 모듈 로더를 사용하는 것입니다. vue-cli를 사용하여 모듈 로더로 앱을 구성하는 것은 매우 쉽습니다 .

실제로 저는 구성 요소 기반 앱을위한 Flux 아키텍처를 개인적으로 좋아합니다 . 그러면 Vue.js 앱 내부의 상태 관리를 위해 특별히 설계된 Flux에서 영감을받은 애플리케이션 아키텍처 인 Vuex를 살펴볼 것을 권장합니다 .

이렇게하면 vue-resource 를 사용 하여 API를 요청 하는 작업을 만든 다음 데이터가 도착하면 해당 데이터가 이미 전역 상태에 바인딩되어 필요한 모든 구성 요소가 자동으로 반응하는 Mutations를 전달할 수 있습니다. 즉, 구성 요소 자체는 서비스를 호출 할 필요가 없으며 Mutations에 의해 전달 된 상태 변경에 반응합니다.

---

서비스의 클래스 인스턴스를 내보낼 수 있습니다.

export default new class {
   ...
}

구성 요소 또는 다른 위치에서 인스턴스를 가져올 수 있으며 항상 동일한 인스턴스를 얻을 수 있습니다. 이렇게하면 삽입 된 Angular 서비스와 유사하게 작동하지만 this.

import myService from '../services/myservice';

Vue.component('my-component', {
  ...
  created: function() {
    myService.oneFunction();
  }
  ...
})

---

이 질문에 몇 가지 아주 좋은 답변이 VueJS의 각도 서비스에 해당하는 무엇을?

@Otabek Kholikov가 말했듯이 4 가지 옵션이 있습니다.

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

내 프로젝트에서는 (4)를 선호합니다. 그것은 나에게 최대한의 유연성을 제공하고 내가 필요한 구현만을 가지고 있습니다. 위에서 언급 한 질문 에 구현 예가 있습니다.

---

모듈 로더를 사용하지 않는 경우 맞춤 플러그인을 정의 할 수 있습니다 . 몇 가지 예제 코드 :

var myPlugin = {
        install: function (Vue, options) {
            //private
            var myPrivateProperty = 'Private property';

            //instance properties and methods
            Vue.prototype.$myPublicProperty = 'Public Property';

            Vue.prototype.$myAddedMethod = function () {
                return myPrivateProperty;
            };
            Vue.prototype._getData = function (url) {
                return url;
            };

            //static properties and methods
            Vue.myStaticProperty = 'My static prop';
            Vue.myStaticMethod = function () {
                console.log('in');
            }
        }
    };

    Vue.use(myPlugin);

    new Vue({
        el: '#app',
        created: function () {
            //using instance
            console.log(this.$myAddedMethod());
            console.log('my get data: ' + this._getData('some url'));
            console.log(this.$myPublicProperty);

            //using static
            console.log(Vue.myStaticProperty);
            Vue.myStaticMethod();
        }
    });

다른 라이브러리를 연결할 수도 있습니다. 이 게시물 에서는 axios.js를 연결하는 방법을 보여줍니다.

---

vue 리소스를 다음과 같이 전역 적으로 구성 할 수 있습니다.

Vue.http.options.root = "your base url"

이제 모든 http 호출에서 리소스 이름으로 간단히 호출 할 수 있습니다.

this.$http.get('');
this.$http.get('users')

참고URL : https://stackoverflow.com/questions/38498427/vue-js-define-a-service