如何在 NuxtJS 的 asyncData 中使用 Promise

Posted 2023-02-23

【中文标题】如何在 NuxtJS 的 asyncData 中使用 Promise

【英文标题】：How to use promises in asyncData in NuxtJS

【发布时间】：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() 钩子。

【参考方案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>