在 Vue 3 中使用 Axios 发送 POST 请求需要首先安装 Axios,然后在 Vue 组件或 Vuex 中使用它。以下是一个简单的安装和使用案例:
安装 Axios
你可以使用 npm 或 yarn 来安装 Axios:
使用 Axios 发送 POST 请求
- 在 Vue 组件中使用 Axios
首先,在你的 Vue 组件中导入 Axios:
在上面的例子中,当点击按钮时,sendPostRequest 方法会被调用,它会向指定的 URL 发送一个 POST 请求,并携带一些数据。如果请求成功,它会打印响应数据;如果请求失败,它会打印错误信息。
在 Vuex 中使用 Axios
如果你更倾向于在 Vuex 中处理 API 请求,你可以这样做:
首先,在你的 Vuex store 中导入 Axios:
然后,在你的 Vue 组件中调用这个 action:
在这个例子中,当点击按钮时,fetchData
方法会被调用,它会触发 Vuex 中的 fetchData
action。这个 action 会发送 POST 请求并更新 Vuex store 中的数据。然后,你可以通过计算属性来访问这些数据。
创建一个 Axios 实例并配置一些基础选项
请注意以下几点:
baseURL 在 instance 创建时已经被设置了,所以在调用 instance.post 时,您只需要提供相对于 baseURL 的路径(例如 /customer_info),而不是完整的 URL。
确保 inputValue 变量在 onSubmit 函数的作用域内是可访问的,并且包含了您想要发送的数据。