Vue.js: определение службы

Я новичок в Vue. Я рассматриваю это как альтернативу Angular, и мне это очень нравится. Чтобы получить представление об этом, я реорганизую существующий проект Angular в проект Vue. Теперь я просто в точке, где мне нужно общаться с моим REST api. В Angular я использовал для этого службу, которая была введена в каждый необходимый контроллер. Vue не знает "сервис", как я понимаю. Как это можно достичь в Vue? До сих пор я не мог найти хороший подход для этого.

vue-resource предназначен только для функций http, как я понимаю. Поскольку я также использую jQuery, это устарело.

Пример:

У меня есть компонент vue 1 и vue 2. Оба требуют доступа к одному и тому же ресурсу REST. Для этого мне нужна центральная служба, которую оба компонента могут использовать для запроса ресурса REST. Angular имеет компонент "service", который именно это делает. Vue не имеет.

Ответ 1

В документации Vue.js.

Сам Vue.js не является полномасштабной каркасом - он ориентирован только на слой вида.

Как библиотека, фокусирующаяся на 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();

Ответ 2

Из документации Vue.js на Создание крупномасштабных приложений.

Сообщество внесло вклад vue-resource, что обеспечивает простой способ работы с API RESTful. Вы также можете использовать любую понравившуюся вам библиотеку Ajax, например. $.ajax или SuperAgent.

Vue не требует, чтобы вы следовали определенной архитектуре, поскольку она относится только к слою представления в архитектуре MVC или MVVM. Поскольку @Marc уже сказал в его ответ, хорошей практикой является использование загрузчика модуля, такого как Browserify или Webpack поэтому вы можете создавать свои "сервисы" в отдельных файлах, импортируя их там, где вам нужно. Очень легко структурировать приложение с помощью загрузчика модуля, используя vue-cli.

Действительно, мне очень нравится архитектура Flux для приложений на основе компонентов, поэтому я рекомендую вам взглянуть на Vuex, флюс-вдохновленная архитектура приложений, специально разработанная для управления состоянием внутри приложений Vue.js.

Таким образом, вы можете создавать действия, которые используют vue-resource для запроса вашего API, тогда вы можете отправлять мутации, когда поступают данные, со всеми компонентами, которые нуждаются в данных, уже привязанных к глобальному состоянию, реагируют автоматически. Другими словами, вашим компонентам не нужно вызывать службы, они просто реагируют на изменения состояния, отправленные Mutations.

Ответ 3

Если вы не используете загрузчик модуля, вы можете определить пользовательский 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();
        }
    });

Вы также можете подключить другие библиотеки, этот пост показывает, как подключить axios.js

Ответ 4

У вас есть очень хорошие ответы на него в этом вопросе Что эквивалентно Angular службе в VueJS?

Как говорит там @Otabek Kholikov - у вас есть 4 варианта:

Служба без сохранения: тогда вы должны использовать mixins
Statefull service: используйте Vuex
Экспорт и импорт из кода vue
любой глобальный объект javascript

В моих проектах я предпочитаю (4). Это дает мне максимальную гибкость и имеет только те реализации, которые мне нужны (я не привожу, например, Vuex и не должен быть строгим к своим правилам, и нет "волшебства" - весь код мой). У вас есть пример реализации в Question, о котором я упоминал выше.