Vue 类组件无法从构造函数访问数据属性

Question

我正在尝试将 Vue 与 typescript 一起使用，但出现错误，说我的成员变量未定义。

import { Component, Vue, Prop } from 'vue-property-decorator';
import UploadApi from './UploadApi';
import ApiConfig from '../../api/api.config';

@Component
export default class UploadCard extends Vue {
  uploading = false;

  private uploads: Array<Upload> = [];

  private api: UploadApi = new UploadApi(ApiConfig.get());

  constructor() {
    super();
    this.getUploads();
  }

  private getUploads() {
    // const loading = this.$store.state.vs.loading();
    // mimic http request
    console.log(this.$data);
    console.log(this.uploading);
    this.api.getUploads().then((response) => {
      console.log(response);
    });

例如这里说 this.api 是未定义的，有人知道吗？

Answer 1

不要使用构造函数，而是使用lifecycle methods 来执行设置任务。例如，将您的构造函数替换为created 或mounted：

created() {
    this.getUploads();
}

详情请见the docs。