asyncData和nuxt js中的方法有什么区别?

我目前使用

  • asyncData 用于获取api数据,但只能在页面中使用(不适用于组件)。
  • 但是方法可以用在页面和组件中

这两种方法的工作方式相同,因此,我正在考虑使用获取api数据的方法。所以我想知道asyncData和method之间有什么重要意义吗?

export default {
  async asyncData ({ req }) {
    let { data } = await axios.get(process.env.API_SERVER + `/v1/projects`)
    return { items: data }
  },
  data () {
    return {
      items: null
    }
  },
  methods: {
    async getItems () {
       let { data } = await axios.get(process.env.API_SERVER + `/v1/projects`)
       this.items = data
    }
  }
泡芙2020/03/24 16:00:18

有很大的不同:

asyncData 是一种在初始化组件之前以及因此在设置组件数据之前自动调用的方法。

因此,您将无法this在自己的方法中获得喜欢。

asyncData对于服务器端渲染很重要,在服务器端渲染中,您想先使用组件中的数据对数据进行渲染,然后再获取数据。Nuxt将等到获取数据后再进行初始化,然后渲染组件。否则它将被清空。

初始化组件时,方法首先可用。

您可以在文档中找到有关asyncData的更多信息,并对其进行了很好的描述。