Nuxtでaxiosの設定ファイルをプラグインとして使う際のバグ(？)

Question

いつもお世話になっております。

Nuxtでaxiosの設定ファイルをプラグインとして作成する際にバグのような動きをします。

初回通信時にプラグインに設定した$axios.setBaseURL()が動作していません。

※GIFにあるように「ログイン」ボタンを押下すると通信が発生します。

ソースコード

export default function( {$axios} ){
  $axios.onRequest( ( config ) => {

    console.log( "$axios.onRequest()実行！" );
    $axios.setBaseURL( 'http://api.example.com' )

  } )
}

Answer 1

「$axios.setBaseURL」はグローバルな設定 (axios.defaults) を変更する関数になっています。
https://github.com/nuxt-community/axios-module/blob/master/lib/plugin.js#L7

今回のようにonRequestフック内でbaseURLを変更されたい場合は、configの値を変更してください。
(※ setBaseURL()をコールしても、onRequest()が呼ばれた段階のリクエストのconfigは書き換わらない)

$axios.onRequest(config => {
  config.baseURL = 'http://api.example.com'
  return config
})

グローバルで変更されたい場合は、下記のような書き方も可能です。

export default function( {$axios} ){
  $axios.setBaseURL( 'http://api.example.com' )

  $axios.onRequest( ( config ) => {
    // ...
  } )
}