时间戳

首页 > 解决方案 > Vue + Axios 与 sessionStorage

vue.js - Vue + Axios 与 sessionStorage

问题描述

目标：最初在 Vue 视图中使用 Wordpress Rest API 通过 Axios 加载帖子一次，并且在访问 Vue 网站的会话期间仅加载一次。

当前结果：我目前成功获取结果并将它们设置在 sessionStorage 中。它们显示正确。我想知道/了解我是否正确地完成了这项工作，并以尽可能最好的方式优化了流程。我查阅了文档，我想我已经把它记下来了。

当前代码：

<script>
import Hero from "@/components/Hero.vue";
import axios from "axios";

export default {
  name: "About",
  components: {
    Hero,
  },
  data: function() {
    return {
      eatery: [],
    };
  },
  created() {
    axios
      .get("//localhost:81/wp-json/wp/v2/posts?_embed&per_page=5&categories=2")
      .then((response) => {
        sessionStorage.setItem("eatery", JSON.stringify(response.data));
      })
      .catch((error) => {
        window.alert(error);
      });
  },
  mounted() {
    if (sessionStorage.getItem("eatery")) {
      this.eatery = JSON.parse(sessionStorage.getItem("eatery"));
    }
  },
};
</script>

标签： vue.jsaxiossession-storage

解决方案

在尝试加载它之前，我会检查它是否在存储中。在您的情况下，它看起来像这样：

export default {
  name: "About",
  components: {
    Hero,
  },
  data: function() {
    return {
      eatery: [],
    };
  },
  loadEatery() {
    axios
      .get("//localhost:81/wp-json/wp/v2/posts?_embed&per_page=5&categories=2")
      .then((response) => {
        sessionStorage.setItem("eatery", JSON.stringify(response.data));
        return response.data;
      })
      .catch((error) => {
        console.error(error); // for debugging maybe
      });
  },
  mounted() {
    if (sessionStorage.getItem("eatery")) {
      this.eatery = JSON.parse(sessionStorage.getItem("eatery"));
    } else {
      loadEatery().then(data => this.eatery = data);
    }
  },
};

推荐阅读