Vue.js: xác định một dịch vụ

Tôi đang xem Vue.js như một sự thay thế cho Angular và tôi thực sự thích nó cho đến nay. Để có cảm giác về nó, tôi đang cấu trúc lại một dự án Angular hiện có thành một dự án Vue. Tôi đang ở điểm mà tôi cần giao tiếp với API REST của mình.

Trong Angular, tôi đã sử dụng để định nghĩa một dịch vụ cho điều đó, dịch vụ đó được đưa vào mọi bộ điều khiển cần nó. Vue dường như không biết cấu trúc "dịch vụ" như tôi hiểu. Làm thế nào điều này có thể đạt được trong Vue?

Tôi đã xem xét vue-resource , nhưng nó chỉ dành cho các chức năng http theo như tôi hiểu. Vì tôi cũng sử dụng jQuery, điều này đã lỗi thời.

Thí dụ:

Tôi có vueComponent1và vueComponent2. Cả hai đều cần truy cập vào cùng một tài nguyên REST. Để xử lý điều này, tôi muốn một dịch vụ trung tâm, mà cả hai thành phần đều có thể sử dụng cho các yêu cầu tới tài nguyên REST. Angular có thành phần 'dịch vụ', thực hiện chính xác điều đó. Vue không.

Từ tài liệu Vue.js.

Bản thân Vue.js không phải là một khung công tác toàn diện - nó chỉ tập trung vào lớp xem.

Là một thư viện tập trung vào V ngoài MVC, nó không cung cấp những thứ như dịch vụ.

Bạn có đang sử dụng một số loại trình tải mô-đun như Browserify hoặc Webpack không?
Sau đó, bạn có thể tận dụng hệ thống mô-đun của ES6 để tự tạo một dịch vụ.
Tất cả những gì bạn phải làm là tạo một lớp JavaScript đơn giản đang được xuất bởi mô-đun mới này.

Một ví dụ có thể trông như thế này:

export default class RestResource {

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

}

Bên trong thành phần vue 1 và 2, bạn có thể sử dụng dịch vụ này bằng cách nhập lớp.

import RestResource from './services/RestResource';

const restResourceService = new RestResource();

restResourceService.sendRequest();

Từ tài liệu Vue.js về Tạo ứng dụng quy mô lớn .

Cộng đồng đã đóng góp plugin vue-resource , cung cấp một cách dễ dàng để làm việc với các API RESTful. Bạn cũng có thể sử dụng bất kỳ thư viện Ajax nào mà bạn thích, ví dụ: $ .ajax hoặc SuperAgent .

Vue không yêu cầu bạn tuân theo một kiến ​​trúc cụ thể, vì nó chỉ đề cập đến lớp View trong kiến ​​trúc MVC hoặc MVVM. Như @Marc đã nói trong câu trả lời của mình , một phương pháp hay là sử dụng trình tải mô-đun như Browserify hoặc Webpack để bạn có thể tạo "dịch vụ" của mình trong các tệp riêng biệt, nhập chúng vào nơi bạn cần. Rất dễ dàng để cấu trúc ứng dụng của bạn với trình tải mô-đun bằng vue-cli .

Thật vậy, tôi thực sự thích kiến trúc Flux cho các ứng dụng dựa trên thành phần, vì vậy tôi khuyên bạn nên xem xét Vuex , một kiến ​​trúc ứng dụng lấy cảm hứng từ Flux được thiết kế đặc biệt để quản lý trạng thái bên trong ứng dụng Vue.js.

Bằng cách này, bạn có thể tạo các Hành động sử dụng vue-resource để yêu cầu API của mình, sau đó bạn có thể gửi các Đột biến khi dữ liệu đến, với tất cả các thành phần cần dữ liệu đó đã được liên kết với Trạng thái chung, sẽ tự động phản ứng. Nói cách khác, bản thân các thành phần của bạn không cần gọi các dịch vụ, chúng chỉ phản ứng với các thay đổi của Trạng thái do Mutations gửi đi.

Bạn có thể xuất phiên bản của một lớp cho dịch vụ của mình:

export default new class {
   ...
}

Trong thành phần của bạn hoặc bất kỳ nơi nào khác, bạn có thể nhập phiên bản và bạn sẽ luôn nhận được cùng một phiên bản. Theo cách này, nó hoạt động tương tự như một dịch vụ Angular được tiêm vào, nhưng không sử dụng this.

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

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

Bạn có một số câu trả lời rất tốt cho nó trong câu hỏi này Tương đương với Dịch vụ Angular trong VueJS là gì?

Như @Otabek Kholikov nói ở đó - bạn có 4 lựa chọn:

1. Dịch vụ không trạng thái: thì bạn nên sử dụng mixin
2. Dịch vụ Statefull: sử dụng Vuex
3. Dịch vụ xuất và nhập từ mã vue
4. bất kỳ đối tượng toàn cầu javascript nào

Trong các dự án của tôi, tôi thích hơn (4). Nó mang lại cho tôi sự linh hoạt tối đa và chỉ có các triển khai tôi cần (tôi không mang ví dụ như Vuex và không nên nghiêm ngặt với các quy tắc của nó và không có "ma thuật" - tất cả mã là của tôi). Bạn có một ví dụ về triển khai trong Câu hỏi tôi đã đề cập ở trên.

Nếu bạn không sử dụng trình tải mô-đun, bạn có thể xác định một plugin tùy chỉnh . Một số mã ví dụ:

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

Bạn cũng có thể cắm các thư viện khác, bài đăng này hướng dẫn cách cắm axios.js

Bạn có thể định cấu hình tài nguyên vue trên toàn cầu như

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

và bây giờ trên mỗi cuộc gọi http, bạn có thể chỉ cần gọi bằng tên của tài nguyên -

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