1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VUE compositionAPIの関数exportで困ったこと

Posted at

VUE compositionAPIの関数exportで困ったこと

困ったこと

肥大化したコンポーネントをファイル分割するためにaxiosを使ってAPIにリクエストを送っている部分を外だししようしたところ、
ローカル実行では特に問題なく動作したが、buildしようとするとエラーをはいてしまう。
備忘も兼ねて共有。

該当コードとエラー

getInfoApi.vue
<script lang="ts">

export const getInfoApi=()=>{
    return //ここにAPIを投げる処理
}

</script>
  • エラーメッセージ
    Error: 'default' is not exported by <getInfoApiを外部から呼び出しているファイルのパス>

解決策

  • compositionAPIで関数の記述をファイル分割する場合はexport defaultで書く。
getInfoApi.vue
<script lang="ts">

export default function getInfoApi(){
    return //ここにAPIを投げる処理
}

</script>

その他

export defaultを使用したことで呼び出している側のファイルでも分割代入によるimportができなくなっているので、
{}は外しておく。
import {getInfoApi} from './getInfoApi.vue';

import getInfoApi from './getInfoApi.vue';

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?