Nuxtjs 组件中的 asyncData 不工作

Question

我对 nuxt.js 项目有疑问。我使用了异步组件，但是当它渲染时，异步不起作用。这是我的代码。

我在 https://nuxtjs.org/api/ 中查看了文档，但我不知道我的问题到底是什么

Test.vue（组件）

    <template>
        <div>
            {{ project }}
        </div>
    </template>

    <script>

    export default {
        data() {
            return {
                project : 'aaaa'
            }
        },
        asyncData() {
            return {
                project : 'bbbb'
            }
        }
    }

    </script>

这是index.vue（页）

    <template>
        <test></test>
    </template>
    <script>

    import Test from '~/components/Test.vue'
    export default {
        components : {
            Test
        }
    }

    </script>

我的预期结果是

    bbbb

但是当运行在 http://localhost:3000 上时，这是实际结果

    aaaa

我尝试搜索 google 很多次，但没有找到适合我的预期解决方案。请有人帮助我。

感谢您的帮助。

Answer 1

components/ 文件夹必须仅包含 "pure" Vue.js 个组件

所以里面不能用asyncData

阅读此常见问题解答：https://nuxtjs.org/faq/async-data-components#async-data-in-components-

components/Test.vue（组件）

<template>
    <div>
        {{ project }}
    </div>
</template>

<script>
export default {
    props: ['project'] // to receive data from page/index.vue
}
</script>

pages/index.vue（页面）

<template>
    <test :project="project"></test>
</template>

<script>
import Test from '~/components/Test.vue'
export default {
    components : {
        Test
    },
    asyncData() {
        return {
            project : 'bbbb'
        }
    }
}
</script>

Answer 2

您不能在组件中使用 asyncData。

您可以选择使用 fetch 方法。

<template>
  <div>
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching mountains</p>
    <ul v-else>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

Nuxtjs 组件中的 asyncData 不工作

asyncData in component of Nuxtjs isn't working

vuejs2

nuxt.js