В Vue JS как я могу сделать мой класс APIService. js глобально доступным для компонентов, не требуя отдельных компонентов для его импорта? - PullRequest
Новая
       18

В Vue JS как я могу сделать мой класс APIService. js глобально доступным для компонентов, не требуя отдельных компонентов для его импорта?

1 голос
/ 14 февраля 2020

Почти все мои компоненты требуют некоторого взаимодействия с моим apiservice. js классом, который импортирует Ax ios и делает соответствующие http-запросы в зависимости от вызываемого метода. Я знаю, что это обычно не рекомендуется, но в каждом из моих компонентов у меня есть следующее: 

import {APIService} from '../store/APIService.js';
const apiService = new APIService();

Мой APIService. js выглядит примерно так (урезано для простоты): 

import axios from 'axios';
const API_URL = 'http://myserver:82/services/locationmanagement';

export class APIService{

constructor(){
}

getLocations() {
    const url = `${API_URL}/api/locations/`;
    return axios.get(url).then(response => response.data);
}

saveLocation(location) {
    let url = `${API_URL}/api/locations/`;
    let id = location.id;
    let httpMethod = 'post';

    if(id > 0 ) {
        httpMethod = 'put';
        url = `${API_URL}/api/locations/${id}`;
    }

    let options = {
        method: httpMethod,
        url: url,
        headers: { 'Content-Type': 'application/json' },
        data: location
    }

    return axios(options);
   }

}

Я бы предпочел, чтобы это было каким-то образом сделано доступным для глобального экземпляра Vue, и мои компоненты могли бы каким-то образом получить к нему доступ.

Я считаю, что это должно быть реализовано в той или иной форме в моем main. js файл, возможно, через Vue .use, но я до сих пор не уверен в том, как реализовать это, даже после просмотра документов.

Любая информация будет принята с благодарностью , Спасибо!

1 Ответ

1 голос
/ 14 февраля 2020

Создайте Vuejs Плагин , импортируйте его в main.js и вызывайте его там с Vue.use(myservice)

РЕДАКТИРОВАТЬ:

Согласно комментарию, одним из способов является добавление плагина к прототипу Vue. Например, оболочка ax ios может быть определена как 

import axios from 'axios'

export default {

  install:function(Vue,options) {

    Vue.prototype.$dataservice = axios.create({...})
    ...

, тогда ее можно вызывать из компонента, как и другие глобальные функции vue, например, $refs, $set, $emit: 

 ...
 this.$dataservice.get(...)
 // or
 this.$dataservice.post(...)
 ...

При использовании API службы данных, если вы используете Vuex, может быть полезно использовать это прежде всего в «действиях».

...