Question

我正在将Vue.js视为Angular的替代品，到目前为止我真的非常喜欢它。为了感受它，我将现有的Angular项目重构为Vue项目。我只是需要与REST API进行通信。

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

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

示例：

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

Answer 1

来自Vue.js文档。

Vue.js本身并不是一个完整的框架 - 它只关注视图层。

作为一个专注于MV的MV的图书馆，它不提供像服务这样的东西。

您使用的是某种模块加载程序，如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();

Answer 2

来自Building Large-Scale Apps上的Vue.js文档。

社区贡献了vue-resource插件，它提供了一种使用RESTful API的简便方法。您也可以使用任何您喜欢的Ajax库，例如$ .ajax或SuperAgent。

Vue不要求您遵循特定的体系结构，因为它仅引用MVC或MVVM体系结构中的View层。正如@Marc已经在his answer中所说的那样，一个好的做法是使用像Browserify或Webpack这样的模块加载器，这样您就可以在单独的文件中创建“服务”，并将它们导入到您需要的位置。使用vue-cli使用模块加载器构建应用程序非常容易。

事实上，我个人非常喜欢基于组件的应用程序的Flux架构，然后我建议你看一下Vuex，这是一款专为管理内部状态而设计的Flux应用程序架构Vue.js应用程序。

这样，您可以创建使用 vue-resource 来请求API的操作，然后您可以在数据到达时调度Mutations，所有需要该数据的组件都已绑定到全局状态，自动反应。换句话说，您的组件本身不需要调用服务，它们只对Mutations调度的状态更改做出反应。

Answer 3

在这个问题What's the equivalent of Angular Service in VueJS?

中，你有一些非常好的答案

正如@Otabek Kholikov所说 - 你有4种选择：

无国籍服务：那么你应该使用mixins
Statefull服务：使用Vuex
从vue代码导出服务和导入
任何javascript全局对象

在我的项目中我更喜欢（4）。它给了我最大的灵活性，并且只有我需要的实现（我不会带来例如Vuex并且不应该严格遵守它的规则而且没有＆＃34;魔法＆＃34; - 所有代码是我的）。您在我上面提到的Question中有一个实施示例。

Answer 4

如果您未使用模块加载程序，则可以定义自定义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

Answer 5

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

export default new class {
   ...
}

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

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

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

Answer 6

您可以将vue资源全局配置为

Vue.http.options.root = "your base url"

现在，在每个http调用上，您都可以简单地按资源名称进行调用-

this.$http.get('');
this.$http.get('users')

Vue.js：定义一个服务

6 个答案: