如何在 NuxtJS 的 asyncData 中使用 promise

Question

我的NuxtJS項目中有 Users.vue組件。 它看起來像：

<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]：屬性或方法“users”未在實例上定義，但在渲染期間被引用。 通過初始化屬性，確保此屬性是反應性的，無論是在數據選項中，還是對於基於類的組件。

Answer 1

您可以使用 fetch 鈎子，但在打開頁面后執行客戶端 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>