Постоянная переменная Vue / Nuxt в сеансе - PullRequest
Новая
       94

Постоянная переменная Vue / Nuxt в сеансе

0 голосов
/ 14 июля 2020

В настоящее время я использую API Карт Google Javascript для создания экземпляра объекта карты. У меня есть простая страница карты. Проблема в том, что я понял, что когда я перемещаюсь по страницам (маршрутам), а затем возвращаюсь на страницу карты, я повторно создаю экземпляр объекта карты, который мне кажется ненужным (считается как еще один вызов API). В vanilla JS я просто создам глобальную переменную карты.

Мне интересно, что я могу сделать, если я хочу сохранить объект карты в сеансе, чтобы маршрутизация назад и вперед вызывала то же самое объект карты.

Мой код выглядит примерно так ... 

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>
methods: {
    onScriptLoaded() {
      console.log("Triggered Maps API");
      this.map = new window.google.maps.Map(document.getElementById("map"), {
        center: new window.google.maps.LatLng(somelat, somelng),
        zoom: 11,
        ...})
    }

mounted(){
if (!process.server && !window.google) {
      const script = document.createElement("script");
      script.onload = this.onScriptLoaded;
      script.type = "text/javascript";
      script.src =
        "https://maps.googleapis.com/maps/api/js?key=<API KEY>&libraries=places";
      document.head.appendChild(script);
    } else {
      this.onScriptLoaded();
    }
}
</script>

Когда я возвращаюсь с маршрута (например, / about), this.map становится неопределенным и создается снова.

Есть ли способ сохранить объект this.map таким образом, чтобы он все еще содержал объект карты, когда я вернусь на эту страницу?

1 Ответ

0 голосов
/ 14 июля 2020

Если вы используете vue -router, вы можете кэшировать маршрутизируемые компоненты с помощью keep-alive. 

  <keep-alive>
    <router-view />
  </keep-alive>

Это кэширует все маршруты. Если вы хотите кэшировать только целевой компонент, используйте include: 

  <keep-alive :include=['mapComponent']>
    <router-view />
  </keep-alive>

ПРИМЕЧАНИЕ. 'MapComponent' - это имя вашего компонента, а не имя вашего маршрута.

Или, вы можете напрямую подключить компонент: 

<keep-alive>
  <map-component></map-component>
</keep-alive>

С keep-alive подключенный обработчик будет вызываться один раз, после создания компонента. Чтобы вызвать какое-либо конкретное действие c при навигации по маршруту или от маршрута, вы будете использовать хуки activated() и deactivated().

...