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

Question

Tôi mới sử dụng Vue. Tôi đang xem nó như một sự thay thế cho Angular và tôi thực sự thích nó cho đến nay. Để có được cảm giác về nó, tôi đang tái cấu trúc dự án Angular hiện tại thành một dự án Vue. Bây giờ tôi chỉ ở điểm mà tôi cần liên lạc với REST api của mình. Trong Angular, tôi đã sử dụng để định nghĩa một dịch vụ cho điều đó, được tiêm vào mọi bộ điều khiển cần thiết. Vue không biết 'dịch vụ' như tôi hiểu. Làm thế nào điều này có thể đạt được trong Vue? Cho đến nay tôi không thể tìm thấy một cách tiếp cận tốt cho việc này.

tài nguyên vue chỉ dành cho các chức năng http như tôi hiểu. Khi tôi sử dụng jQuery quá, điều này là lỗi thời.

Ví dụ:

Tôi có thành phần vue 1 và thành phần vue 2. 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, cả hai thành phần đều có thể sử dụng để yêu cầu tài nguyên REST. Góc có thành phần 'dịch vụ', chính xác là điều đó. Vue không có.

Answer 1

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

Vue.js itself is not a full-blown framework - it is focused on the view layer only.

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

Bạn đang sử dụng một số loại trình tải mô-đun như Browserify hoặc Webpack?
Sau đó, bạn có thể tận dụng hệ thống mô-đun ES6 để tự mình 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 mô-đun mới này xuất khẩu.

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 của bạn 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(); 

Answer 2

Từ tài liệu Vue.js trên Building Large-Scale Apps.

The community has contributed the vue-resource plugin, which provides an easy way to work with RESTful APIs. You can also use any Ajax library you like, e.g. $.ajax or SuperAgent .

Vue không yêu cầu bạn phải làm theo một kiến ​​trúc đặc biệt, vì nó chỉ đề cập đến việc Xem lớp trong một kiến ​​trúc MVC hoặc MVVM. Như @Marc đã nói trong his answer, thực hành tốt 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 ở nơi bạn cần. Việc cấu trúc ứng dụng của bạn với trình tải mô-đun rất dễ dàng bằng cách sử dụng vue-cli. Thật vậy, tôi personaly thực sự thích kiến ​​trúc Flux cho các ứng dụng dựa trên thành phần, sau đó tôi khuyên bạn hãy xem Vuex, 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 toàn cầu. Nói cách khác, các thành phần của bạn không cần phải gọi các dịch vụ, chúng chỉ phản ứng với các thay đổi của Nhà nước được gửi đi bởi các đột biến.

Answer 3

Nếu bạn không sử dụng bộ nạp mô-đun, bạn có thể xác định 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 vào các thư viện khác, this post cho thấy làm thế nào để cắm vào axios.js

Answer 4

Bạn có một số câu trả lời rất tốt để nó trong câu hỏi này What's the equivalent of Angular Service in VueJS?

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

1. Dịch vụ không quốc tịch: sau đó bạn nên sử dụng mixins
2. statefull dịch vụ: sử dụng Vuex
3. dịch vụ xuất khẩu và nhập khẩu từ một mã vue
4. bất kỳ đối tượng toàn cầu javascript

Trong các dự án của tôi, tôi thích (4). Nó mang lại cho tôi sự linh hoạt tối đa và chỉ có những triển khai mà tôi cần (tôi không mang đến ví dụ Vuex và không nên nghiêm khắc với 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ó ví dụ về triển khai trong số Question tôi đã đề cập ở trên.