第一页加载时，“asyncData()”中的属性在“mounted()”中不可用

Question

我们有一个由 Nuxt 2.14 运行的静态生成的网站。
在某些页面组件中，我需要

asyncData()

函数中的多个属性才能使应用程序正常工作。
在开发模式下，当我重新加载页面时，

asyncData()

工作完全正确：它被触发，并且相应的属性被合并到组件实例中。

但是，当我在生产版本中的同一页面上执行相同的操作时，它会失败：在执行

mounted()

挂钩期间，

asyncData()

所需的属性丢失。
我猜这是由于第一次加载页面时服务器端触发了该钩子所致。

但是为什么即使执行了

nuxt generate

命令也无法在本地重现呢？

Answer 1

这应该可以完美工作

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const { data } = await $axios.get(
      'https://jsonplaceholder.typicode.com/posts/1'
    )
    return { data }
  },
  mounted() {
    console.log(this.data)
  },
}
</script>

关于Nuxt2的生命周期：https://nuxtjs.org/docs/concepts/nuxt-lifecycle/

---

工作解决方案的公共 GitHub 存储库：https://github.com/kissu/yes-it-works