Как вы отделяете api запросы в nuxt?

Question

[Kotaro Hiba]

Добрый день, как вы отделяете в проете API запросы от компонентов, что бы не писать одинаковую колбасу каждый раз?
Единственный способ который я придумал писать все запросы в отдельных классах как пример:

export class NetworkManager {
  readonly $axios!: AxiosInstance
  constructor() {
    if (process.client) {
      this.$axios = axios.create({
        baseURL: "/",
        headers: {
          // TODO Получает токен 1 раз при загрузке страницы, нужно сделать так что бы получал его постоянно если он изменится
          token: getToken() || "",
        },
      })
    }
  }

  defaultCatch(error: any) {
    const info = error.response as AxiosResponse

    if (info.status === 403) {
      window.$nuxt.error({ statusCode: 403 })
    }
    return error.response
  }
}

class CharacterApi extends NetworkManager {
  async loadCharacters(
    callbackError: FunctionErrorResponse
  ): Promise<CharacterDTOResponse[]> {
    const res: AxiosResponse<CharacterDTOResponse[] | ErrorResponse> =
      await this.$axios.get("/api/character").catch((e) => this.defaultCatch(e))
    if (res.status === 200) {
      return res.data as CharacterDTOResponse[]
    } else {
      callbackError(res as AxiosResponse<ErrorResponse>)
    }
    return []
  }

  async pathCharacter(
    id: string,
    body: any,
    callbackError: FunctionErrorResponse
  ): Promise<CharacterDTOResponse | void> {
    const res: AxiosResponse<CharacterDTOResponse | ErrorResponse> =
      await this.$axios.patch("/api/character/" + id, body)
    if (res.status === 200) {
      return res.data as CharacterDTOResponse
    } else {
      callbackError(res as AxiosResponse<ErrorResponse>)
    }
  }
}
export default new CharacterApi()

У этого метода есть свои плюс в виде того, что можно использовать во vuex и в fetch и в принципе где угодно.
Из минусов я не могу использовать инстанс аксиоса из nuxt по причинам того что при попытке сослаться на него из NetworkManager во время загрузки страницы window.$nuxt - возвращает undefined
+ не знаю как во всех классах обновить токен в инстансе аксиона если он обновился полагаю что это можно исправить тем, что мы не будем сразу экспортировать новый класс из файла, но я это еще не проверил.

Второй вариант сделать запросы как миксины для компонентов, но тогда я не смогу их использовать в fetch и vuex, но не будет проблем с инстансом axios

Подскажите может быть есть какой то универсальный способ который позволит вынести логику запросов используя при этом инстанс из nuxt? + решает проблему с обновлением токена (его храню в локальном хранилище, да не совсем верно для SSR, но свой маленький проект для изучения nuxt, я буду переводить на SSR чуть по позже).