Nuxt 3中useFetch的POST请求payload为何为空？

问题出在useFetch的body配置上：你直接传入了一个静态对象，这个对象在useFetch初始化时就被创建，此时email.value是空字符串。后续输入框内容变化时，这个静态对象里的email值不会自动更新，所以请求体始终是空字符串。

解决步骤 #

把body改成返回对象的函数，这样每次调用execute()时，都会重新执行函数获取最新的email.value：

修改后的<script setup>代码：

<script setup>
const config = useRuntimeConfig();
const email = ref("");

const notifyMe = () => {
  return execute();
};

const { pending, execute } = useFetch("/notifyme", {
  immediate: false,
  baseURL: config.public.apiBase,
  method: "POST",
  // 把body改为函数，动态获取最新值
  body: () => ({
    email: email.value,
  }),
});
</script>

这样调整后，每次点击提交按钮执行execute()时，都会用当前输入框的最新值作为请求体的email参数，就能正确传递输入的内容了。

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