サーバー側から返されるデータのオブジェクトプロパティはスネークケースの場合がほとんどですが、Nuxt.jsにおいてはキャメルケースで扱われることが主流となっています。
スネークケースとキャメルケースを併用して書くこともできますが、記述量が増えることでメンテナンスしづらくなる要因の一つになります。
そこで、Nuxt.js + axiosでスネークケース・キャメルケースを相互変換するプラグインを作成しました。
まず、camelcase-keysとsnakecase-keysをインストールします。
/plugins/axios.js
ファイルを作成します。
axios.js
import camelcaseKeys from 'camelcase-keys'
import snakecaseKeys from 'snakecase-keys'
export default ({ $axios }) => {
$axios.onRequest((config) => {
if (!config.data || typeof config.data !== 'object') {
return config
}
config.data = snakecaseKeys(config.data, { deep: true })
return config
})
$axios.onResponse((response) => {
if (!response.data || typeof response.data !== 'object') {
return response
}
response.data = camelcaseKeys(response.data, { deep: true })
return response
})
}
nuxt.config.jsのpluginsに追記します。(axiosがmodulesに追加されているかも確認してください)
nuxt.config.js
...
plugins: [
{
src: '~/plugins/axios'
}
],
modules: [
'@nuxtjs/axios'
],
...
これでリクエスト時はキャメルケースのオブジェクトプロパティがスネークケースに、外部から受け取ったデータのオブジェクトプロパティがスネークケースならキャメルケースに変換されます。