如何在 NuxtJS 的 asyncData 中使用 Promise答案

【问题标题】：How to use promises in asyncData in NuxtJS如何在 NuxtJS 的 asyncData 中使用 Promise
【发布时间】：2021-09-23 03:44:57
【问题描述】：

我的 NuxtJS 项目中有 Users.vue component。它看起来像：

<template>
<section>
  <h1>{{ pageTitle }}</h1>
  <ul>
    <li v-for="user of users" :key="user">
        <a href="#" @click.prevent="goTo(user)">User {{ user }}</a>
    </li>
  </ul>
</section>
</template>

<script>
    export default {
        asyncData() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve({
                        users : [1,2,3,4,5]
                    })
                }, 3000)
            })
        },
        data() {
            return {
                pageTitle: "Это страница с пользователями"
            }
        },
        methods: {
            goTo(user) {
                return this.$router.push('/users/' + user)
            }
        }
    }
</script>

当我在 asyncData() 中使用 promise 时，出现错误 [Vue warn]: Property or method "users" is not defined on the instance but referenced during render.通过初始化该属性，确保该属性在数据选项或基于类的组件中是反应性的。

【问题讨论】：

asyncData() 仅在页面组件中可用。先获取页面组件asyncData()中的用户数据，传递给页面组件内部的组件
Doc
感谢您的回答。但是如何将数据从页面传递到组件？
通过道具。或者使用fetch() 钩子。

标签： javascript vue.js promise vue-component nuxt.js

【解决方案1】：

您可以使用 fetch 挂钩，但在打开页面后执行客户端获取。 https://nuxtjs.org/docs/2.x/features/data-fetching#the-fetch-hook

对于“未定义属性或方法'用户'”将“默认”用户添加到数据或使用<li v-if="users" v-for="user of users" :key="user">

<template>
<section>
  <h1>{{ pageTitle }}</h1>
  <ul>
    <li v-for="user of users" :key="user">
        <a href="#" @click.prevent="goTo(user)">User {{ user }}</a>
    </li>
  </ul>
</section>
</template>

<script>
    export default {
        fetch() {
          return new Promise(resolve => {
                setTimeout(() => {
                      this.users = [1,2,3,4,5];                        
                      resolve();
                }, 3000)
            })
        },
        data() {
            return {
                users: [],
                pageTitle: "Это страница с пользователями"
            }
        },
        methods: {
            goTo(user) {
                return this.$router.push('/users/' + user)
            }
        }
    }
</script>

【讨论】：