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';