Vue项目中ES6多函数导出及导入报错问题排查

首先，我们来解决如何正确导出fetchData和sendData两个函数的问题，然后分析你遇到的Type Error: Object undefined错误原因并修正。

一、修正db_handler.js的导出方式 #

你当前的代码只默认导出了fetchData，要同时导出两个函数，需要使用命名导出的方式。修改db_handler.js的最后一行：

// 替换原来的 export default fetchData
export { fetchData, sendData };

另外，注意你的sendData函数目前没有返回值，如果后续需要处理它的异步结果（比如判断请求是否成功），建议给它加上return：

function sendData(method, slug, payload) {
  // 加上return，让函数返回axios的Promise对象，方便后续异步处理
  return axios[method](`${API_ENDPOINT}${slug}`, payload);
}

二、分析并修复Type Error: Object undefined错误 #

你遇到的错误核心原因是导出和导入方式不匹配：

• 之前你用export default fetchData（默认导出），但在moduleAuth.js里用了import {fetchData, sendData} from "../../utility/db_handler"（命名导入）。
• 默认导出的变量在命名导入中无法被正确识别，这会导致fetchData变成undefined，调用时自然抛出"Object undefined"的错误。

现在修改db_handler.js为命名导出后，你当前的导入代码import {fetchData, sendData} from "../../utility/db_handler"就完全正确了，不需要修改。

三、验证修复效果 #

修改完成后，重新运行项目，触发登录操作：

• AUTH_REQUEST action会正常调用fetchData发起登录请求
• 请求成功后会正确触发AUTH_SUCCESS mutation，存储token并调用USER_REQUEST dispatch
• 登录流程将恢复正常，不会再出现未定义的错误

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