11
4

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 3 years have passed since last update.

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

Last updated at Posted at 2020-01-22

サーバー側から返されるデータのオブジェクトプロパティはスネークケースの場合がほとんどですが、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'
],
...

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

11
4
2

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
11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?