导入的函数未定义

Posted 2021-03-30

我通过Vue CLI使用Webpack，当我尝试使用我的页面时出现Error in created hook: "TypeError: _api__WEBPACK_IMPORTED_MODULE_0__.default.$_playerApi_getPlayers is not a function"错误。

这是我的树形结构：

.
+ main.js
+ app/
|  + api.js
|  + App.vue
|  + players/
|  |  + api.js
|  |  + index.js
|  |  + routes.js
|  |  + components/
|  |  |  + index.js
|  |  |  + Login.vue
|  |  |
|  |  + vuex/
|  |     + actions.js
|  |     + ...
|  |
|  + others/
|     + api.js
|     + ...
|
+ ...

应用程序/播放/ vuex / actions.js：

import { default as api } from '../../api'

export default {

  loadPlayers({ commit }) {
    return api.$_playerApi_getPlayers().then(response => {  // <--- ERROR LINE
      commit('STORE_PLAYERS', response.body)
      return response
    })
    .catch(error => {
      throw error
    })
  },

  loadPlayer({ commit }, playerId) {
    return api.$_playerApi_getPlayer(playerId).then(response => {
      commit('LOAD_PLAYER', response.data)
      return response
    })
    .catch(error => {
      throw error
    })
  },

  ...

}

应用程序/播放/ api.js：

export default {

  ...

  $_playerApi_getPlayer(playerId = '') {
    ...
  },

  $_playerApi_getPlayers() {
    ...
  },

  ...

}

应用程序/ api.js：

import { api as players } from './players'

export default {
  players,
}

我很确定这是错误的（obv。）但我不确定如何让它正常工作。

我在这做错了什么？出口和进口似乎没问题，但它们在某种程度上打破我无法看到或调试。

我已尝试在我的app / api.js中使用以下内容，但这是错误的，因为导出不是数组：

import { api as players } from './players'

export default {
  ...players,
}

我也尝试在我的app / players / api.js中使用以下内容，但它也不起作用：

export default {

  methods: {

    ...

    $_playerApi_getPlayer(playerId = '') {
      ...
    },

    $_playerApi_getPlayers() {
      ...
    },

    ...

  },

}

答案

在你的app/api.js：

import * as players from './players/api'
export default {
  ...players,
} 

在你的app/players/api.js：

export function $_playerApi_getPlayer(playerId = '') {
   ...
}

export function $_playerApi_getPlayers() {
   ...
}