javascript - 导入的函数未定义

Question

我通过 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
|     + ...
|
+ ...

app/players/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
    })
  },

  ...

}

app/players/api.js:

export default {

  ...

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

  $_playerApi_getPlayers() {
    ...
  },

  ...

}

app/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() {
      ...
    },

    ...

  },

}

Answer 1

在你的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() {
   ...
}