Help us understand the problem. What is going on with this article?

Nuxt.js + axiosでスネークケース・キャメルケースを相互変換する

サーバー側から返されるデータのオブジェクトプロパティはスネークケースの場合がほとんどですが、Nuxt.jsにおいてはキャメルケースで扱われることが主流となっています。
スネークケースとキャメルケースを併用して書くこともできますが、記述量が増えることでメンテナンスしづらくなる要因の一つになります。

そこで、Nuxt.js + axiosでスネークケース・キャメルケースを相互変換するプラグインを作成しました。

まず、camelcase-keyssnakecase-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'
],
...

これでリクエスト時はキャメルケースのオブジェクトプロパティがスネークケースに、外部から受け取ったデータのオブジェクトプロパティがスネークケースならキャメルケースに変換されます。

yumayamada1029
多分日本で一番Spotify APIを触ってる人。 音楽共有プラットフォームDIGLEとか開発してます。 https://digle.tokyo https://mag.digle.tokyo
https://digle.tokyo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away