Vue.js: визначте послугу

Я розглядаю Vue.js як альтернативу Angular, і мені це дуже подобається. Щоб скласти відчуття, я переробляю існуючий проект Angular на проект Vue. Я просто в точці, де мені потрібно спілкуватися зі своїм REST API.

У Angular я використовував для цього службу, яка вводилася в кожен контролер, який її потребував. Vue, здається, не знає конструкції "service", як я розумію. Як цього можна досягти у Vue?

Я розглядав vue-resource, але це, наскільки я розумію, лише для функціональних можливостей http. Оскільки я теж використовую jQuery, це застаріло.

Приклад:

У мене є vueComponent1і vueComponent2. Обом потрібен доступ до одного ресурсу REST. Для цього я хочу центральну службу, яку обидва компоненти можуть використовувати для запитів до ресурсу REST. Angular має компонент "service", який саме це і робить. Vue не мав.

З документації 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
  }

}

Усередині компонента 1 і 2 vue ви можете використовувати цю послугу, імпортуючи клас.

import RestResource from './services/RestResource';

const restResourceService = new RestResource();

restResourceService.sendRequest();

З документації Vue.js щодо створення великомасштабних програм .

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

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

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

Таким чином, ви можете створювати дії, які використовують vue-ресурс для запиту вашого API, потім ви можете відправляти мутації, коли дані надходять, з усіма компонентами, які потребують цих даних, вже прив'язаних до глобального стану, реагуючи автоматично. Іншими словами, вашим компонентам не потрібно викликати служби, вони просто реагують на зміни штату, які надсилає Mutations.

Ви можете експортувати екземпляр класу для своєї служби:

export default new class {
   ...
}

У свій компонент або будь-яке інше місце ви можете імпортувати екземпляр, і ви завжди отримаєте той самий. Таким чином, він поводиться подібно до введеної служби Angular, але без використання this.

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

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

У вас є кілька дуже хороших відповідей на це запитання Що таке еквівалент Angular Service у VueJS?

Як каже @Otabek Holikov, у вас є 4 варіанти:

1. Служба без громадянства: тоді вам слід використовувати міксини
2. Повноцінна служба: використовуйте Vuex
3. Експорт послуги та імпорт з коду vue
4. будь-який глобальний об'єкт javascript

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

Якщо ви не використовуєте завантажувач модулів, ви можете визначити власний плагін . Приклад коду:

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

Ви можете налаштувати ресурс vue глобально як

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

і тепер при кожному виклику http ви можете просто зателефонувати за назвою ресурсу -

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