Nuxt类组件中async fetch方法失效问题：原因排查与修复方案

问题重现 #

你当前使用vue-property-decorator编写的Nuxt类组件代码如下：

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class Index extends Vue {
  form = {
    name: '',
    adress: '',
    age: '',
    items: [],
  }
  async fetch() {
    this.form.items = await fetch('https://api.nuxtjs.dev/posts').then(c => c.json())
    console.log(this.form.items)
  }
  fetchOnServer = true;
  changeLanguage(language: string) {
    this.$i18n.setLocale(language);
  }
}
</script>

问题是：这个类组件中的async fetch()方法无法被Nuxt自动调用执行，但换成Nuxt标准的选项式写法就可以正常工作。

问题成因 #

核心原因在于Nuxt的fetch是框架自定义的顶层组件选项，而非Vue原生的生命周期钩子，而vue-property-decorator的@Component装饰器默认只会处理Vue原生的生命周期（比如created、mounted），并将类中的方法注册为Vue组件的methods，不会自动把类方法提升为Nuxt的顶层选项。

简单来说，你当前写法里的fetch()只是类的一个普通方法，Nuxt根本“看不到”它，自然不会触发执行；同理fetchOnServer作为类的属性，也不会被Nuxt识别为对应的配置项。

修复方案 #

这里提供两种可行的修复方式，你可以根据自己的需求选择：

方案1：在@Component配置中手动声明Nuxt选项

直接把fetch和fetchOnServer放到@Component的配置对象里，这样Nuxt就能识别到这些顶层选项了：

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component({
  // 将fetch作为Nuxt顶层选项声明
  async fetch(this: Index) {
    this.form.items = await fetch('https://api.nuxtjs.dev/posts').then(c => c.json())
    console.log(this.form.items)
  },
  // 配置服务端渲染的fetch开关
  fetchOnServer: true
})
export default class Index extends Vue {
  form = {
    name: '',
    adress: '',
    age: '',
    items: [],
  }

  changeLanguage(language: string) {
    this.$i18n.setLocale(language);
  }
}
</script>

注意这里我们用this: Index来给fetch方法指定类型，保证在方法里能正确访问类的属性和方法。

方案2：使用nuxt-property-decorator简化写法

nuxt-property-decorator是专门为Nuxt扩展的类组件装饰器库，它在vue-property-decorator的基础上增加了对Nuxt特殊钩子（如fetch、asyncData）的支持。

1. 先安装依赖：

npm install nuxt-property-decorator
# 或者使用yarn
yarn add nuxt-property-decorator

2. 修改组件代码，用@Fetch装饰器标记你的fetch方法：

<script lang="ts">
import { Vue, Component, Fetch } from 'nuxt-property-decorator'

@Component
export default class Index extends Vue {
  form = {
    name: '',
    adress: '',
    age: '',
    items: [],
  }

  // 使用@Fetch装饰器标记为Nuxt的fetch钩子，server: true对应fetchOnServer: true
  @Fetch({ server: true })
  async fetch() {
    this.form.items = await fetch('https://api.nuxtjs.dev/posts').then(c => c.json())
    console.log(this.form.items)
  }

  changeLanguage(language: string) {
    this.$i18n.setLocale(language);
  }
}
</script>

这样@Fetch装饰器会自动把类方法注册为Nuxt的顶层fetch选项，写法更符合类组件的风格。

内容的提问来源于stack exchange，提问作者Ascolon