[Vue] 全コンポーネントで使用する変数(定数)の管理方法

Question

聞きたいこと

WebアプリのフロントをVue.jsで実装しているのですが、コンポーネント全体で使用する変数(定数)の定義場所に困っています。
現状AjaxでAPIサーバーからデータを取得する際に、APIサーバーのホスト名を変数にしていますが、computedやmethodsの各メソッド内ですべて宣言・代入をしています。

<script>

 :
 export default {
 :

    methods: {
      getRowCount (items) {
        return items.length
      },
      async onChange() {
        let host
        if (process.env.NODE_ENV === "development") {
          host = "localhost"
        } else {
          host = "APIサーバー"
        }

        this.sessions = await axios
          .get(`http://${host}/api/hub/${this.selected}/session`)
          .then(response => response.data)
      },
      async deleteSession (sessionName) {
        let host
        if (process.env.NODE_ENV === "development") {
          host = "localhost"
        } else {
          host = "APIサーバー"
        }
        await axios
          .delete(`http://${host}/api/xxx/`, {
            headers:
              {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
          })
      },
    },
    watch: {
      months: function (newVal) {
        this.onChange(newVal);
      }
    }
  }
</script>

共通変数を使用している箇所が多くなればなるほど、変更が必要になった際に大変になるので、どこかで一元管理したいと思っています。

Answer 1

コード自体をテストしたいませんので、シンタックスエラーがありましたら、申し訳ございません。

でもこういうパターンでどうでしょうか？
すべてのaxiosの呼び出すところをapi.jsにまとめて、hostもそこに纏めるといいです。

import { host } from './api'などでどこからでも取得できます。

コンポネント

import { getSessions } from './api'

export default {
  //...

  methods: { 
     async onChange() {
        getSessions(this.selected)
           .then(({data}) => this.sessions = data)
     },
  },

}

api.js

import axios from 'axios'

export const host = process.env.NODE_ENV === "development" ? "localhost" : "APIサーバー"

export function getSessions(selected) {
    return axios.get(`http://${host}/api/hub/${selected}/session`)
}

export function otherApiCall() {
    return axios.get(`http://${host}/api/other`)
}