我可以让我的代码在加载组件后执行一次脚本吗？

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

您可以在父组件加载数据，然后将其传递给您的组件。我不知道你是如何启动你的组件的，但你可以先加载数据，然后通过传递加载的数据来启动子组件。您还可以在父组件和子组件之间创建一个中间件组件，以永久保存数据。您可以在创建父级或使用延迟加载时创建它。另一个解决方案——真的不推荐——是不删除你的组件，只是隐藏它，这对你的应用程序的性能非常不利。您还需要记住，所有这些解决方案都会导致一直将加载的数据保留在内存中，因此内存效率不高（除非您添加某种垃圾收集器以从内存中删除这些数据，例如在 n 次之后).

Answer 2

有多种方法可以做到这一点。您可以尝试将 API 响应保存在您的 sessionStorage 中，这样它将一直存在，直到您关闭浏览器 window。

<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>

我可以让我的代码在加载组件后执行一次脚本吗？

Can I make my code execute a script once when I have loaded a component?

javascript

vue.js

vue-router