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：定义服务

回答

相关问题