如何在Nuxt 3中不使用Composition API从后端获取数据

如果你想在Nuxt 3里用传统的Options API（而非Composition API）发送GET请求，完全可以实现，以下是具体步骤和示例：

1. 准备工作（可选：使用Axios） #

如果你偏好使用Axios，先安装对应的Nuxt模块：

npm install @nuxtjs/axios
# 或
yarn add @nuxtjs/axios

然后在nuxt.config.ts中注册模块：

export default defineNuxtConfig({
  modules: ['@nuxtjs/axios']
})

2. 用Options API编写请求逻辑 #

在Vue组件中，直接采用Vue 2风格的Options API写法即可，比如：

<template>
  <div>
    <h2>海报列表</h2>
    <ul v-if="posters.length > 0">
      <li v-for="poster in posters" :key="poster.id">
        {{ poster.title }}
      </li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

<script>
export default {
  // 定义响应式数据
  data() {
    return {
      posters: []
    }
  },
  // 组件挂载后调用请求方法
  async mounted() {
    await this.getPosters()
  },
  // 定义请求方法
  methods: {
    async getPosters() {
      // 用Axios发送请求
      const results = await this.$axios.get('posters')
      this.posters = results.data

      // 或者用Nuxt 3内置的$fetch（无需额外安装Axios）
      // const posters = await this.$fetch('/api/posters')
      // this.posters = posters
    }
  }
}
</script>

关键说明 #

• Nuxt 3原生支持Options API，无需额外配置兼容层
• 若不想依赖Axios，推荐使用Nuxt内置的$fetch方法，它更贴合Nuxt 3的生态，且支持服务端渲染场景
• 方法中的请求地址请根据你的实际后端接口调整，比如/api/posters对应Nuxt项目的API路由

内容的提问来源于stack exchange，提问作者Mohammad Ghiasvand