如何在 Nuxt 3 服务器/api 中传递参数？答案

【问题标题】：How to pass params in Nuxt 3 server/api?如何在 Nuxt 3 服务器/api 中传递参数？
【发布时间】：2022-11-10 04:17:57
【问题描述】：

我不知道如何将参数传递给 Nuxt 3 中的匿名函数。

index.vue:

<template>
  <form @submit.prevent="signUpNewsletter()">
    <input type="email" placeholder="example@x.com" v-model="userEmail">
    <input type="submit" value="Submit">
  </form>
</template>

<script setup>
const userEmail = ref('x@x.de')

function signUpNewsletter () {
  useAsyncData(
    'newsletter',
    () => $fetch('/api/sign_up_news', {
      method: 'POST', // Post method works
      body: {
        email: userEmail.value
      }
    })
  )
}
</script>

server/api/sign_up_news.js:

import { createClient } from '@supabase/supabase-js'

export default async (email) => { // can't read the parameter
  const SUPABASE_KEY = 'key123'
  const SUPABASE_URL = 'url.supabase.co'
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

  const { data, error } = await supabase
    .from('newsletter')
    .insert([{ email }]) // <<< Fails!
  return data
};

working:

import { createClient } from '@supabase/supabase-js'

export default async () => {
  const SUPABASE_KEY = 'key123'
  const SUPABASE_URL = 'url.supabase.co'
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

  const { data, error } = await supabase
    .from('newsletter')
    .insert([{ email: 'hi@it.works' }]) // <<< Works!
  return data
};

你知道如何将参数传递到 Nuxt 3 服务器/api 吗？或者你有资源吗？此时的official docs are blank。

【问题讨论】：

标签： javascript vuejs3 anonymous-function supabase nuxtjs3

【解决方案1】：

我不认为你能够以你正在做的方式将参数直接传递给函数。

在another part of the docs 中，它表示当您将主体传递给server/api 函数时，您需要使用await useBody(event) 检索它。

【讨论】：

你是对的。我错过了那部分。谢谢！

【解决方案2】：

使用useBody

它在文档中提到：https://v3.nuxtjs.org/guide/features/server-routes#handling-requests-with-body

你只需要通读

import { createClient } from '@supabase/supabase-js'

export default async (event) => { // can't read the parameter
  
  const body = await useBody(event)
  const SUPABASE_KEY = 'key123'
  const SUPABASE_URL = 'url.supabase.co'
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

  const { data, error } = await supabase
    .from('newsletter')
    .insert([{ email: body.email }]) 
  return data
};

【讨论】：