Vue.js:定义一个服务

2022-08-30 05:34:47

我正在研究Vue.js作为Angular的替代品,到目前为止我真的很喜欢它。为了了解它,我将一个现有的Angular项目重构为Vue项目。我只是需要与我的 REST API 进行通信。

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

我考虑过,但据我所知,它只适用于http功能。由于我也使用jQuery,这已经过时了。vue-resource

例:

我有 和 .两者都需要访问相同的 REST 资源。为了解决这个问题,我需要一个中央服务,这两个组件都可以用于对REST资源的请求。Angular具有“服务”组件,正是这样做的。Vue 没有。vueComponent1vueComponent2


答案 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();

答案 2

您可以导出服务的类实例:

export default new class {
   ...
}

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

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

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