typescript 在nuxt2中,获取方法抛出“超出最大调用堆栈大小”错误

rqdpfwrv  于 2023-02-05  发布在  TypeScript
关注(0)|答案(1)|浏览(114)

我欢迎大家!面对这样的问题,当我在Nuxt 2组件中创建fetch方法时,我得到错误“超出最大调用堆栈大小”堆栈跟踪没有显示任何好的东西

import { Component, Vue } from 'vue-property-decorator';
import BaseModal from '~/components/Business/Modal/BaseModal.vue';
import ModalForm from '~/components/UI/Form/ModalForm.vue';
import ModalFormInput from '~/components/UI/FormElements/Input/ModalFormInput.vue';
import BaseButton from '~/components/UI/FormElements/Button/BaseButton.vue';
import ModalSwitcher from '~/components/Business/Switch/ModalSwitcher.vue';
import ChangeInputService from '~/services/ui/input/change-input-service';
import InputService from '~/services/ui/input/input-service';
import AuthService from '~/services/business/security/auth-service';
import Routes from '~/api/routes';
import ApiRequestService from '~/services/business/api-request-service';
import GoogleAuthUrlRequest from '~/api/requests/google-auth-url-request';

@Component({
  components: {
    BaseModal,
    ModalForm,
    ModalFormInput,
    BaseButton,
    ModalSwitcher
  },

  async fetch() {} // Maximum call stack size exceeded
})
export default class AuthModal extends Vue {
  private googleAuthUrl: string | null = null;

  private readonly changeInputService: ChangeInputService = new ChangeInputService({
    email: new InputService('', 'string', undefined, 1),
    password: new InputService('', 'string', undefined, 1)
  });

  private readonly authService: AuthService = new AuthService(this);
  private buttonIsLoading: boolean = false;

  public async mounted(): Promise<void> {
    await this.socialNetworkAuth();
  }

  private async socialNetworkAuth(): Promise<void> {
    const query = this.$route.query;

    if ('code' in query && 'state' in query) {
      const modal = this.$refs.modal as BaseModal;

      modal.open();
      modal.setIsLoading(true);

      await this.authService.socialNetworkAuth(
        Routes.social_auth.google.auth,
        query.code as string
      );
    }
  }

  private async auth(): Promise<void> {
    if (this.changeInputService.allFieldsWithoutErrors()) {
      this.buttonIsLoading = true;

      await this.authService.auth({
        email: this.changeInputService.getInput('email').getValue(),
        password: this.changeInputService.getInput('password').getValue()
      });

      this.buttonIsLoading = false;
    }
  }
}

如果删除此方法,则错误将消失,此外,即使提取中没有任何内容,也会出现此错误
我尝试将其替换为asynData,但asyncData在组件中不起作用,它仅适用于页面组件

icnyk63a

icnyk63a1#

已解决问题,无需立即初始化属性,它们需要通过created挂钩初始化

相关问题