Nuxt2组件中定义fetch方法触发Maximum call stack size exceeded错误

问题根源 #

Nuxt2对页面组件和普通组件的fetch方法处理逻辑不同，当通过vue-property-decorator的@Component装饰器选项定义fetch时，会触发内部无限递归调用，哪怕方法为空也会抛出Maximum call stack size exceeded错误。

可行解决方案 #

• 将fetch定义为类实例方法：不要在@Component的配置项里声明fetch，直接在Vue类内部定义该方法：

  @Component({
    components: {
      BaseModal,
      ModalForm,
      ModalFormInput,
      BaseButton,
      ModalSwitcher
    }
  })
  export default class AuthModal extends Vue {
    // 直接在类中定义fetch
    async fetch() {
      // 这里写你的异步逻辑
    }
  
    // 原有代码保持不变...
  }
  

• 改用生命周期钩子替代：如果不需要Nuxt的fetch专属特性（比如$fetchState状态管理），可以直接在created或mounted钩子中执行异步操作，就像你已经在mounted里处理社交登录逻辑那样，把原本要放在fetch里的代码移到这些钩子中。

• 排查依赖兼容性：部分旧版本的vue-property-decorator和Nuxt2存在兼容性问题，尝试升级相关依赖：

  npm update vue-property-decorator nuxt
  

验证步骤 #

1. 删除@Component配置中的async fetch() {}代码块
2. 选择上述任一方案调整代码
3. 重启Nuxt开发服务，确认错误消失

内容的提问来源于stack exchange，提问作者Данил