在Nuxt框架中如何重新调用asyncData或fetch钩子？

问题原因 #

asyncData是Nuxt专属的页面生命周期钩子，仅在页面初始化阶段（服务端渲染/客户端路由跳转前）执行，不会挂载到组件实例上，因此无法通过this.asyncData直接调用。同时asyncData执行时组件实例尚未创建，本身也不支持在实例方法内直接调用。

解决方案（最推荐：抽离公共请求逻辑） #

把接口请求逻辑抽为独立公共函数，asyncData和实例方法可以复用，也方便你在请求完成后触发自定义事件：

<template>
  <my-orders
    :orders="orders"
    @sendData="initOrders"
  />
</template>
<script>
// 抽离独立的请求方法，复用逻辑
const getOrderList = async ($axios) => {
  return await endpoint.getOrders({ $axios })
}

export default {
  async asyncData({ $axios }) {
    const orders = await getOrderList($axios)
    return { orders }
  },
  methods: {
    async initOrders() {
      // 客户端侧直接调用公共方法，手动赋值给响应式数据
      this.orders = await getOrderList(this.$axios)
      // 在这里触发你需要的$emit即可
      // this.$emit('resetCompleted')
    }
  }
}
</script>

其他可选方案 #

如果需要全量刷新当前页面所有asyncData返回的数据，可以调用Nuxt内置的刷新方法：

methods: {
  async initOrders() {
    await this.$nuxt.refresh()
    // 刷新完成后触发$emit
  }
}

注意该方法会重新执行当前页面所有的asyncData、fetch钩子，更新所有异步返回的数据，适合需要全量刷新的场景，灵活度低于抽离公共方法的方案。

原有代码语法问题修正 #

• template中:orders="orders缺少闭合的双引号
• script中的组件配置项缺少export default包裹

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