Question

我正在为此项目使用Nuxt js。我在这里使用功能 asyncData以在服务器端获取数据。这就是为什么我不能将数据设置为“数据”的原因，因为所有数据都是在服务器上提取的。但是我在控制台中出现错误“属性或方法“ posts”未在实例上定义，但在渲染过程中被引用...”。

<template>
    <div>
        <v-list v-for="item in posts">
            <v-list-tile :key="item.id">
                <v-list-tile-content>
                    <h1>{{item.title}}</h1>
                </v-list-tile-content>
            </v-list-tile>
        </v-list>
    </div>
</template>

export default {
        asyncData() {
return axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(response => {
                    return {posts: response.data}
                })
        }
    }

由于文档https://nuxtjs.org/guide/async-data，我只需要使用“帖子”

Answer 1

正如前面提到的，asyncData 钩子在组件中不可用，而只能在页面中使用。

在 Nuxt JS 2.12 中虽然引入了一个新的 fetch 钩子，它可以解决这个问题：https://nuxtjs.org/docs/2.x/features/data-fetching#async-data-in-components

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await axios.get('https://jsonplaceholder.typicode.com/posts').then(response =>
        response.data
      )
    }
  }
</script>

Answer 2

asyncData()方法仅在pages中有效。

摘自nuxt.js官方文档：

要解决此限制，您有两个基本选择：

在已挂接的钩子中进行API调用，并在设置时设置数据属性已加载。缺点：不适用于服务器端渲染。
在页面组件的asyncData或fetch方法中进行API调用，然后将数据作为道具传递给子组件。服务器渲染将工作正常。缺点：页面的asyncData或fetch可能是可读性较差，因为它正在加载其他组件的数据。

Nuxt。属性或方法“ posts”未在实例上定义，但在渲染期间被引用

2 个答案: