Nuxt.jsでクライアントサイドから外部API通信がしたい
Q&A
Closed
解決したいこと
一週間ほど前からNuxt.jsを学習しております。
RESAS APIから取得した都道府県のデータをもとにチェックボックスを生成し、
チェックが入ったら選択した都道府県の人口構成データを取得するという内容のアプリを作成中です。
(APIキーを秘匿化するために.envファイルを作成し、nuxt.config.jsで.envファイルから
privateRuntimeConfigに設定しております。)
初期表示時はasyncDataを利用することでcontext.$configからAPIキーを取得出来ますが、マウント後に再度API通信を行う場合
APIキーはどのように取得するのが正しいのでしょうか。
今回はマウント後のdataの一部をAPIリクエストに含めたいのでthisが使用できないasyncDataは利用できないと思っています。
また、クライアントサイドのアクションで外部APIと通信する場合はサーバーサイドで通信するという記事も拝見しました。
fetchであればAPIキーも取得でき、thisも使用できるので、APIから取得したデータをVuexに保存すれば良いのかなとも思いますが、通常Nuxt.jsでクライアントサイドからAPI通信する場合はどのような方法で行うのでしょうか。
自分で試したこと
・API_KEYをasyncData以外で使用するために@nuxtjs/dotenvを使用し、ページコンポーネントでprocess.env.API_KEYで取得
（一応取得は出来ましたがdotenvとruntimeConfigを併用すること自体が間違っている気がしています）
nuxt.config.js
require('dotenv').config();
const {API_KEY, API_URL} = process.env;
export default {
・
・
・
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'@nuxtjs/axios',
'@nuxtjs/dotenv',
],
axios: {
baseURL: API_KEY,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
publicRuntimeConfig: {
apiUrl: API_URL,
},
privateRuntimeConfig: {
apiKey: API_KEY,
},
}
index.vue
<script>
export default {
async asyncData(context){
const prefs = await context.$axios.$get('/prefectures/',{headers: {'X-API-KEY': context.$config.apiKey}});
return {prefs: prefs.result};
},
data(){
return {
selectedPrefId: [],
apiKey: '',
}
},
mounted(){
this.setApiKey();
},
methods: {
setApiKey(){
this.apiKey = process.env.API_KEY;
},
},
}
</script>
0 likes