Как предотвратить повторное выполнение axios запроса?

Question

[kr_ilya]

Имеется SPA приложение vue. В компоненте идет запрос к api с использование axios. При загрузке страницы первый раз выполняется запрос к api, далее, если перейти на другую станицу, а затем вернуться обратно, то запрос к серверу выполнится еще раз. И так каждый раз при открытии данной страницы. Как избежать повторных обращений к серверу и сохранить данные у клиента до момента перезагрузки сайта?
О vue знаю немного, только начинаю изучать. Есть несколько вариантов, которые никак не связаны с механикой vue (например хранить данные в куках и просто блочить обращение к апи условием, но это тот еще костыль...).
Файл api.js

import axios from 'axios'
export default() => {
  return axios.create({
    baseURL: 'http://' + document.location.host + ':3000'
  })
}

Функция в компоненте vue

mounted() {
     this.getIP()
   },
  methods: {
    async getIP () {
      const response = await Service.getIP();
    }
  }

Файл, содержащий Service:

import Api from '@/services/Api'

export default {
  getIP () {
    return Api().get('/')
  }
}

Answer 1

[coderisimo]

Можно хранить данные в local storage. Перед запросом смотреть есть ли в нем необходимые данные. И обновлять по условию.

ps это при условии, что у вас идет полное обновление странички. Если нет , то , конечно Vuex

Answer 2

[Антон Антон]

https://ru.vuejs.org/v2/api/#keep-alive

Answer 3

[eRKa]

1. Ajax способен сам кешировать запрос, если параметр cache=true и если строка запроса не поменялась.
2. Можно хранить состояние страницы вместе с данными где-то уровнем выше, в компонентах, которые не пересоздаются при загрузки страницы, а при загрузке страницы проверять наличие этих данных.
3. Vuex - он как раз предназначен для глобального хранения состояний.