Я новичок в Vue.js и пытаюсь создать Vue CLI с HTTP-клиентом через Axios.

Я нашел эту полезную настройку, поскольку проект, который я делаю, будет довольно большим, и я хочу, чтобы его можно было многократно использовать в качестве шаблона. Я немного обновил его, чтобы он соответствовал текущим версиям, но (скорее всего) не таким образом, чтобы вызвать эту ошибку.

Я сделал услугу, расширяющую упомянутый класс API:

import { AxiosRequestConfig, AxiosResponse } from 'axios';
import { apiConfig } from './config/api.config';
import { Api } from './superclasses/api';

const api = '/portals';

export class PortalService extends Api {
  constructor(config: AxiosRequestConfig) {
    super(config);
  }

  public async getPortals(): Promise<AxiosResponse<Portal[]>> {
    return await this.get<Portal, AxiosResponse<Portal[]>>(api);

    // return this.success(portals);
  }
}

export const portalService = new PortalService(apiConfig);

Моя проблема в том, что я использую portalService в контексте vue. Он не признает это как класс.

У меня есть следующий файл vue, PortalsList.vue:

<template>
  <div class="container">
    <h2>Portals</h2>
    <button @click="getPortals()">Get portals</button>
    <table v-if="portals" class="table table-bordered">
      <thead>
        <tr>
          <th>Portal Id</th>
          <th>Name</th>
          <th>Domain</th>
          <th>File Domain</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in portals" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.domain }}</td>
          <td>{{ item.fileDomain }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Portal } from '@/interfaces/portal';
import { portalService } from '@/services/portalService';

@Component
export default class PortalsList extends Vue {
  private portals: Portal[] = [];

  public async getPortals() {

    const response = await portalService.getPortals();
    this.portals = response.data;
  }
}
</script>

Когда я нажимаю кнопку "Получить порталы", в консоли появляется следующая ошибка:

Console errors

Я знаю, что мне еще многому нужно научиться и что нужно найти массу информации, но я просто не мог найти правильного решения своей проблемы, которая привела меня сюда.

0
JaisBC 23 Фев 2021 в 11:38

1 ответ

Лучший ответ

Я нашел ответ на свою проблему. Метод не является членом класса, поскольку никогда не привязан к нему. Я исправил это самым типичным способом, который смог найти, с помощью стрелочных функций. Простая привязка в конструкторе дала мне еще одну ошибку, и я обнаружил, что мне также пришлось исправить определенные места в классе Api.

В результате portalService.ts выглядит так:

import { Portal } from '@/interfaces/portal';
import { AxiosRequestConfig, AxiosResponse } from 'axios';
import { apiConfig } from './config/api.config';
import { Api } from './superclasses/api';

const api = '/portals';

export class PortalService extends Api {
  constructor(config: AxiosRequestConfig) {
    super(config);
  }

  public getPortals = async (): Promise<Portal[]> => {
    const portals = await this.get<Portal, AxiosResponse<Portal[]>>(api);
    return this.success(portals);
  };
}

export const portalService = new PortalService(apiConfig);

0
JaisBC 23 Фев 2021 в 11:13