Vue.js：定义一个服务

Question

我正在将 Vue.js 视为 Angular 的替代品，到目前为止我真的很喜欢它。为了感受一下，我将现有的 Angular 项目重构为 Vue 项目。我正处于需要与我的 REST API 通信的地步。

在 Angular 中，我曾经为此定义一个服务，该服务被注入到每个需要它的控制器中。据我所知，Vue 似乎并不知道“服务”结构。这在 Vue 中如何实现？

我考虑 vue-resource ，但据我所知，它仅适用于 http 功能。因为我也使用 jQuery，所以这已经过时了。

例子：

我有 vueComponent1 和 vueComponent2 。两者都需要访问相同的 REST 资源。为了处理这个问题，我需要一个中央服务，这两个组件都可以用于对 REST 资源的请求。 Angular 有“服务”组件，它正是这样做的。 Vue 没有。

原文由 Herr Derb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Marc 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以为您的服务导出一个类的实例：

 export default new class {
   ...
}

在您的组件或任何其他地方，您可以导入实例，并且您将始终获得相同的实例。这样，它的行为类似于注入的 Angular 服务，但不使用 this 。

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

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

原文由 Max Oriola 发布，翻译遵循 CC BY-SA 4.0 许可协议