Vue.js : 서비스 정의

Question 1

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

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

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

예:

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

Question 2

Vue.js 문서에서.

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

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

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();

Question 3

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

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

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

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

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

Question 4

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

export default new class {
   ...
}

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

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

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

Question 5

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

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

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

내 프로젝트에서는 (4)를 선호합니다. 그것은 나에게 최대한의 유연성을 제공하고 내가 필요한 구현만을 가지고 있습니다 (예를 들어 Vuex를 가져 오지 않고 그것의 규칙에 엄격하지 않아야하며 "마법"이 없어야합니다-모든 코드는 내 것입니다). 위에서 언급 한 질문 에 구현 예가 있습니다.

Question 6

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

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를 연결하는 방법을 보여줍니다.

Question 7

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

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

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

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