Question

我想共享相同的代码块以获取asyncData中的数据并使用Nuxt挂载。

例如asyncData

  async asyncData({ $api, $auth, route, error, store }) {
    if( !process.server ) return null;
    let res = {};
    let stockData = await $api.stocks.getStock(route.params.name);
    if( stockData ) { res.stockData = stockData.data; }
    return res;
  },

在mounted()

中

if(ObjectHelper().isEmpty( this.stockData )) {
  this.$api.stocks.getStock(route.params.name).then(res => {
    this.stockData = res.data;
  })
}

这两个代码块都从服务器端获取数据。如何编写一个通用函数以重用它但又不写入两次？在nuxt文档中，You do NOT have access of the component instance through this inside asyncData because it is called before initiating the component.

Answer 1

关于您的评论是否包含API调用服务器和客户端，这是您提出问题的原因-无需在mounted中复制或共享它，因为asyncData被称为服务器和客户端。您将在nuxt文档中找到以下内容：

每次加载 page 组件之前，都会调用
asyncData。它将被称为一次服务器端（在对Nuxt应用程序的首次请求中）导航到其他路线时和客户端。

这意味着-假设您在页面A上拥有asyncData，并且用户使用页面B进入您的网站，并通过Nuxt链接从页面B导航到页面A的客户端，它将触发{{1 }}客户端，然后再初始化页面组件。

在asyncData中共享代码并使用Nuxt挂载

1 个答案: