javascript - 当我加载组件时，我可以让我的代码执行一次脚本吗？

Question

我正在 Vuejs 中制作一个 Web 应用程序，并且使用带有单文件组件的 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>

Answer 1

有多种方法可以做到这一点。您可以尝试将 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>