Vue.js：定义一个服务

javascript vue.js rest

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