javascript - nuxt js 中的 asyncData 和方法有什么不同？

Question

我目前使用

• 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
    }
  }

Answer 1

有很大的区别:

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

因此，您将无法像在您的方法中那样访问 this。

asyncData 对于服务器端渲染很重要，您希望在使用获取的数据渲染组件之前先获取数据。 Nuxt 会等到数据被获取后才初始化，然后渲染组件。否则它将呈现为空。

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

您会找到有关 asyncData 的更多信息 here in the docs那里描述得很好。