vue3 post请求

### 如何在 Vue 3 中发送 POST 请求

为了实现发送 `POST` 请求的功能，在 Vue 3 应用程序中通常会借助于 Axios 或者 Fetch API 来完成网络请求操作。下面展示了一个基于 Axios 的例子来说明如何创建一个方法来进行数据提交。

#### 安装 Axios
首先需要安装 axios，可以通过 npm 进行安装：

npm install axios

#### 创建 Post 方法并调用接口

接下来定义组件中的 `methods` 属性，并在里面加入名为 `submitData` 的函数用来执行实际的数据提交逻辑[^2]。

<template>
  <form @submit.prevent="submitData">
    <!-- 表单字段 -->
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const formData = ref({
  title: '',
  body: ''
});

function submitData() {
  axios.post('https://jsonplaceholder.typicode.com/posts', formData.value)
       .then(response => console.log(response.data))
       .catch(error => console.error('There was an error!', error));
}
</script>

上述代码片段展示了怎样通过 Axios 发送带有 JSON 数据体的 HTTP POST 请求到指定 URL 地址上。这里使用了箭头函数作为事件处理器的一部分，当表单提交时触发该函数；同时利用了 Composition API 提供的 `ref()` 函数使状态管理更加简洁高效[^4]。