Vue.js组件调用API时出现TypeError: Cannot read properties of undefined (reading 'getList')错误的解决方法

这个错误其实是模块导入导出不匹配导致的，咱们一步步拆解问题：

错误根源 #

错误提示说Cannot read properties of undefined (reading 'getList')，意味着你代码里的gpbApi.catalogProducts是undefined，自然没法调用它的getList方法。

看一下你的模块关系：

• 在catalogProducts.js中，你用的是命名导出：export async function getList(...)
• 但在gpbApi.js中，你用的是默认导入：import catalogProducts from './catalogProducts'

默认导入只会抓取模块的default导出内容，而你的catalogProducts.js并没有设置默认导出，所以这里导入的catalogProducts其实是undefined，最终导致gpbApi.catalogProducts也是undefined。

两种解决方案 #

方案一：修改catalogProducts.js为默认导出 #

如果你只需要在catalogProducts.js里导出getList这一个方法，可以把它改成默认导出：

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost/client/';

// 改为默认导出
export default async function getList(entityId) {
  if (entityId == null) return;
  const { data } = await axios.get(`api/getList?id=${entityId}`);
  return data;
}

这种情况下gpbApi.js不需要修改，不过如果后续要给catalogProducts.js新增其他API方法，这种方式就不太方便了。

方案二：修改gpbApi.js的导入方式（更推荐） #

如果以后要在catalogProducts.js里扩展更多API方法，推荐用这种方式——适配命名导出的导入逻辑：

// 导入整个模块的所有命名导出
import * as catalogProducts from './catalogProducts';

export default {
  catalogProducts
};

或者也可以单独导入需要的方法再组装：

import { getList } from './catalogProducts';

export default {
  catalogProducts: {
    getList
  }
};

这种方式的好处是，以后你在catalogProducts.js里新增命名导出的方法（比如createProduct、updateProduct），gpbApi.js不需要做任何修改，就能直接通过gpbApi.catalogProducts.createProduct调用，扩展性拉满。

验证修改 #

调整完代码后，重启你的Vue项目，再触发load方法，就不会再出现这个undefined的错误了，API调用应该能正常执行。

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