Могу ли я заставить мой код выполнить скрипт один раз, когда я загрузил компонент? - PullRequest
Новая
       6

Могу ли я заставить мой код выполнить скрипт один раз, когда я загрузил компонент?

0 голосов
/ 11 января 2019

Я делаю веб-приложение в Vuejs и использую vue-router с отдельными компонентами файла.

Когда пользователь вводит маршрут, вызывается функция created() компонента. В функции created() я загружаю данные с другого сайта, но я хочу, чтобы этот код выполнялся только один раз, чтобы он не загружался при каждом посещении страницы. Есть идеи по подходу?

Теперь это мой код: 

<template>
    <div>
        <h1>Arrangementer</h1>
        <br>
        <div class="events">
            <Event v-for="event in events" 
                :key="event.id"
                :title="event.title"
                :desc="event.desc"
                :position="event.position"
                :start_date="event.start_date"
                :end_date="event.end_date"
                :registration="event.registration"
                :img_url="event.img_url"
                :body="event.body" />
        </div>
    </div>
</template>


<script>

import Event from '../components/Event';
import axios from 'axios';
import rollbar from '../../server/logging';

export default {
    components: {
        Event
    },
    data: () => {
        return {
            events: {}
        }
    },
    created() {
        const vm = this;
        axios.get('/api/events').then((response) => {
            vm.events = response.data;
        }).catch((e) => {
            rollbar.error(e);
            vm.$notify({
                group: "varsel",
                title: "En feil oppsto",
                text: "Jeg klarte ikke å hente info :("
            });
        })
    }
}
</script>

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Есть несколько способов сделать это. Вы можете попытаться сохранить ответ API в вашем sessionStorage, чтобы он сохранялся до тех пор, пока вы не закроете окно браузера. 

<template>
  <div>
    <h1>Arrangementer</h1>
    <br>
    <div class="events">
      <Event
        v-for="event in events"
        :key="event.id"
        :title="event.title"
        :desc="event.desc"
        :position="event.position"
        :start_date="event.start_date"
        :end_date="event.end_date"
        :registration="event.registration"
        :img_url="event.img_url"
        :body="event.body"
      />
    </div>
  </div>
</template>


<script>
import Event from "../components/Event";
import axios from "axios";
import rollbar from "../../server/logging";

export default {
  components: {
    Event
  },
  data: () => {
    return {
      events: {}
    };
  },
  methods: {
    async getApi() {
      try {
        const events = await axios.get("/api/events");
        sessionStorage.setItem("api_events", events);
        return events;
      } catch (err) {
        rollbar.error(e);
        this.$notify({
          group: "varsel",
          title: "En feil oppsto",
          text: "Jeg klarte ikke å hente info :("
        });
      }
    }
  },
  created() {
    const events = sessionStorage.getItem("api_events");
    if (events) {
      this.events = events;
    } else {
      this.getApi();
    }
  }
};
</script>
0 голосов
/ 11 января 2019

Вы можете загрузить данные в родительский компонент, а затем передать их вашему компоненту. Я не знаю, как вы инициируете свой компонент, но вы можете сначала загрузить данные, а затем инициировать дочерний компонент с передачей загруженных данных. Вы также можете создать компонент промежуточного программного обеспечения между вашим родительским и дочерним компонентами просто для постоянного хранения данных. Вы можете создать его при создании родителя или используя ленивую загрузку. Другое решение, которое на самом деле не рекомендуется, состояло бы в том, чтобы не удалять ваш компонент, а просто скрывать его, что очень плохо сказывается на производительности вашего приложения. Также необходимо помнить, что все эти решения будут приводить к постоянному сохранению загруженных данных в памяти, поэтому это неэффективно для памяти (если только вы не добавите какой-либо сборщик мусора для удаления этих данных из памяти, например, через n раз ).

...