NuxtJS如何通过子组件emit触发重新加载asyncData？

结论 #

你给出的实现方案不可行。

原因说明 #

你用的asyncData是Nuxt框架的专属生命周期钩子，仅会在页面初始化渲染前（服务端渲染阶段或客户端首次路由跳转前）执行一次，执行时框架会自动注入$axios、store这类上下文参数。它不属于挂载在页面实例上的普通方法，无法通过事件绑定直接调用，强行调用也获取不到所需的上下文参数，会直接报错。

另外你的子组件代码存在语法笔误：this.$emit('asyncData)少了单引号闭合，要修正为this.$emit('asyncData')。

正确实现方案 #

把请求逻辑抽为公共方法，asyncData初始化时调用该方法，事件触发时直接调用实例上的公共方法即可。

修改后的页面代码 #

<template>
  <component-child :products="products" @reloadProducts="fetchProducts" />
</template>
<script>
export default {
  async asyncData({ $axios, store }) {
    const customerId = store.getters['user/auth/customerId'];
    if (!customerId) {
      return { products: [] };
    }
    // 初始化时调用请求方法
    const products = await customerApi.getProducts({ $axios }, customerId);
    return { products };
  },
  data() {
    return {
      products: []
    }
  },
  methods: {
    async fetchProducts() {
      const customerId = this.$store.getters['user/auth/customerId'];
      if (!customerId) return;
      const newProducts = await customerApi.getProducts({ $axios: this.$axios }, customerId);
      // 如果是无限加载场景需要拼接数据，改成 this.products.push(...newProducts) 即可
      this.products = newProducts;
    }
  }
}
</script>

修改后的子组件代码 #

methods: {
  infiniteHandler() {
    // 修正语法错误，触发父组件绑定的重载方法
    this.$emit('reloadProducts');
  }
}

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