Vue.js：定義服務

我是Vue的新手。我把它看作是Angular的替代品，到目前爲止我非常喜歡它。爲了得到它的感覺，我將一個現有的Angular項目重構爲一個Vue項目。現在我只是在需要與REST API進行通信的時候。在Angular中，我曾經爲它定義一個服務，它被注入到每個需要控制的控制器中。據我所知，Vue並不知道「服務」。這在Vue中如何實現？到目前爲止，我找不到一個好的方法。Vue.js：定義服務

vue-resource僅用於http功能，據我所知。由於我也使用jQuery，這已經過時了。

實施例：

我有VUE組分1和組分VUE 2兩者都需要訪問相同的REST資源。爲了處理這個問題，我想要一箇中央服務，這兩個組件都可以用來請求REST資源。 Angular有'服務'組件，正是這樣做。 Vue沒有。

來源

2016-07-21 Herr Derb

提供您需要的具體示例。 http足以與REST進行溝通 – gurghet

查看vue-resource：https：//github.com/vuejs/vue-resource – nils

從Vue.js文檔。

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

作爲一個圖書館關注V出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();

來源

2016-07-21 09:15:49 Marc

感謝您的報價。這意味着在視圖和模型下面沒有結構或任何東西。如果我想要一項服務，我需要建立自己的服務，例如使用純JS。 –

我得到'movieslist.vue？1be4：38Uncaught TypeError：_resource.Resource不是構造函數，當我使用這個... –

@GeorgeKatsanos你能提供產生錯誤信息的代碼嗎？ – Marc

從Building Large-Scale Apps的Vue.js文檔。

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並不要求您遵循特定的體系結構，因爲它只涉及MVC或MVVM體系結構中的視圖層。由於@Marc已經在his answer中說過了，一個好的做法是使用像Browserify或Webpack這樣的模塊加載器，這樣您就可以在單獨的文件中創建「服務」，並在需要時導入它們。使用vue-cli模塊加載器構建應用程序非常簡單。實際上，我個人真的很喜歡基於組件的應用程序的Flux體系結構，然後我建議您看看Vuex，這是一個Flux靈感的應用程序體系結構，專門用於管理Vue.js應用程序中的狀態。

這樣，你就可以創建使用VUE資源來請求您的API操作，那麼你可以派遣突變當數據到達時，與需要這些數據已經被綁定到全局狀態，自動反應的所有組件。換句話說，你的組件本身不需要調用這些服務，它們只是對由Mutations調度的狀態變化作出反應。

來源

2016-07-21 14:26:58

如果您不使用模塊加載器，則可以定義自定義plugin。一些示例代碼：

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

您也可以插入其他圖書館，this post顯示如何在axios.js

來源

2017-08-09 00:28:25

插上你有一些很好的答案，它在這個問題What's the equivalent of Angular Service in VueJS?

正如@ Otabek Kholikov說，有 - 你有4個選項：

無國籍服務：那麼你應該使用混入
有狀態的服務：使用Vuex
服務出口和進口從VUE代碼
任何JavaScript全局對象

在我的項目，我更喜歡（4）。它給了我最大的靈活性，只有我需要的實現（我不帶例如Vuex，不應該嚴格規則，沒有「魔法」 - 所有的代碼都是我的）。你在上面提到的Question中有一個實現的例子。

來源

2017-09-24 22:16:29 Alexander

Vue.js：定義服務

回答

相關問題