Axios请求服务器端的一个组件

Question

如何在vue组件中在服务器端执行axios请求。该组件应显示来自axios响应的结果（这是一个很大的响应，因此服务器端应比客户端端更具性能）。

<template>
  <div>

  </div>
</template>

<script>
export default {
  props: {
    ...
  },

  ...
}
</script>

我已经尝试过创建和安装生命周期方法，但是两者都在客户端运行（并且创建的方法也在服务器上运行）。是否可以对服务器端的一个组件执行一些axios请求？

Answer 1

在Nuxt中，您有两种方法可以做到这一点。您可以使用asyncData方法：

<template>
  <div>

  </div>
</template>

<script>
export default {
  props: {
    ...
  },
  async asyncData (context) {
    // here you have access to app, store, axios if you use it, etc
    return yourData // your data will be available as a data
  }

  ...
}
</script>

您也可以使用middleware。它的工作方式与asyncData方法相同，您也可以在页面组件中使用它，但是您可以以全局方式使用它，以便可以在每次页面更改时执行它（例如，在某些条件下用于重定向用户）

更多信息：https://nuxtjs.org/api/pages-middleware/