typescript - nuxt typescript 应用程序中的动态类数据

Question

我试图制作一些应用程序。

<template>
  <v-container>
    <h1>user's page</h1>
    {{ user.id }}
    {{ user.data.getName() }}
  </v-container>
</template>

<script lang="ts">
import Vue from 'vue';
import { User } from '~/typescript/classes/base/user';

export default Vue.extend({
  name: 'Index',
  data() {
    const user: object = {};
    return {
      user
    };
  },
  mounted() {
    this.user = new User(1); // create user instance by ID
    this.user.loadAllServerData(); // call method to get server Data
  }
});
</script>

// this file works fine
export class User {
  private readonly id: number;
  data: Data;

  constructor(id: number) {
    this.id = id;
  }

  loadAllServerData(): void {
    this.loadUserInfo().then((info) => {
      this.data = new Data(info); // now 'data' has method 'getName()'
    });
  }

  getId(): number {
    return this.id;
  }
}

首先，在mounted中，我初始化类，然后调用通过用户ID加载所有其余用户信息的方法。那么这个类的实例应该有一个字段“数据”以及一些其他方法和字段，如“名称”。

它的工作，但是当我尝试在我的模板中使用它时，它不起作用，我在“loadAllServerData”之后看不到我的类中的变化，也看不到用户名。如何在模板中打印用户名？

我尝试通过 AsyncData 或 fetch 制作它但没有成功

标签： typescriptvue.jsnuxt.js