Vue.js结合Axios调用.post报Cannot read property 'post' of undefined如何解决

报错场景 #

作为Vue.js开发新手，在跟随YouTube技术教程完成商品创建功能开发时，每次提交表单就触发控制台报错，具体错误信息为：

vue.js:1400 Uncaught TypeError: Cannot read property 'post' of undefined
at Proxy.store (D:\Workspace\Web\Laravue-client\src\views\product\create.vue:86)
逐行对照教程的代码写法，确认编写的代码与教程示例完全一致，但教程作者运行时并未出现该报错。

报错根因 #

问题出在axios的导入语法错误：
当前组件脚本里的导入语句为：

import { axios } from "axios";

该写法试图从axios模块中通过具名导入获取名为axios的成员，但目前npm源上安装的主流版本axios，仅对外提供默认导出，不存在名为axios的具名导出属性。这会导致导入完成后，代码里的axios变量实际取值为undefined，执行axios.post()方法时，自然会抛出“无法读取undefined属性post”的类型错误。

教程作者未遇到该问题的常见原因：

• 教程基于旧版axios编写，旧版本支持这种具名导入写法
• 作者实际在项目入口全局挂载了axios实例，剪辑教程时省略了全局配置步骤，你本地没有对应的全局配置逻辑

解决方法 #

将组件脚本中的axios导入语句修改为默认导入写法即可：

import axios from "axios";

修改完成后重新提交表单，即可正常向目标接口发起POST请求。

可选优化方向 #

当前代码将完整接口地址硬编码在组件中，后续接口域名变更时需要逐文件修改，可以单独抽离公共axios实例，统一配置基础接口地址、请求拦截、响应拦截逻辑，减少重复代码。 #

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