如何在next 3服务器/api传递参数?

Question

我不知道如何在next 3中传递参数给匿名函数。

index.vue:

<template>
<form @submit.prevent="signUpNewsletter()">
<input type="email" placeholder="[e-mail]" v-model="userEmail">
<input type="submit" value="Submit">
</form>
</template>
<script setup>
const userEmail = ref('[e-mail]')
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: '[e-mail]' }]) // <<< Works!
return data
};

你知道如何将参数传递到next 3 server/api吗?或者你有线人吗?目前官方文件是空白的。

Answer 1

更新，我今天刚刚发现useBody现在已被弃用，它被readBody所取代。

参考此问题

Answer 2

我认为你不能像现在这样直接向函数传递参数。

在文档的另一部分中，它说当您将一个主体传递给server/api函数时，您需要使用await useBody(event)检索它。

Answer 3

使用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
};