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>

Answer 2

您可以在父组件上加载数据，然后将其传递给您的组件。我不知道如何启动组件，但是您可以先加载数据，然后再通过传递加载的数据来启动子组件。您也可以在父组件和子组件之间创建中间件组件，以永久保留数据。您可以在创建父对象或使用延迟加载时创建它。另一个解决方案（实际上不建议这样做）是不删除组件，而只是隐藏它，这对应用程序的性能确实有害。您还需要记住，所有这些解决方案都将导致始终将加载的数据保留在内存中，因此它的内存使用效率不高（除非您添加某种垃圾回收器，例如在n次之后从内存中删除此数据））。

加载组件后，能否使我的代码执行一次脚本？

2 个答案: