Vue: Проверить наличие изменений в sessionStorage - PullRequest
Новая
       44

Vue: Проверить наличие изменений в sessionStorage

0 голосов
/ 26 мая 2020

Цель: Проверить существующие данные sessionStorage, получить с помощью Ax ios, если он не существует.

Текущее состояние: Я успешно получил данные однако мне нужно перейти на другую страницу, а затем вернуться на страницу, на которой находится код, чтобы отобразить его.

Текущий код: 

import Hero from "@/components/Hero.vue";
import axios from "axios";

export default {
  name: "About",
  components: {
    Hero
  },
  data: function() {
    return {
      eatery: []
    };
  },
  methods: {
    loadEatery: function() {
      console.log("Fetching Data");
      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 {
      console.log("No Data Found");
      this.loadEatery().then(data => (this.eatery = data));
    }
  }
};

Текущие ошибки В консоли:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'then' of undefined"

TypeError: Cannot read property 'then' of undefined

Ответы [ 2 ]

0 голосов
/ 26 мая 2020

Лучший способ справиться с этим - установить this.eatery, как только вы получите ответ ax ios. Поэтому вместо обработки обещаний и обратных вызовов здесь выполните следующие действия: 

loadEatery: function() {
  axios
    .get(
      "//localhost:81/wp-json/wp/v2/posts?_embed&per_page=5&categories=2"
    )
    .then(response => {
      sessionStorage.setItem("eatery", JSON.stringify(response.data));
      this.eatery = response.data // ADD THIS LINE TO DIRECTLY CHANGE
      return response.data;
    })
    .catch(error => {
      console.error(error); // for debugging maybe
    });
}

И просто вызовите this.loadEatery ();

0 голосов
/ 26 мая 2020

Похоже, вы возвращаете response.data из вызова ax ios, но вы возвращаете его только в контексте функции loadEntry. Ваша функция loadEntry ничего не возвращает.

Попробуйте вернуть response.data из loadEntry: 

loadEatery: function() {
  console.log("Fetching Data");
  let returnVal;

  axios
    .get(
      "//localhost:81/wp-json/wp/v2/posts?_embed&per_page=5&categories=2"
    )
    .then(response => {
      sessionStorage.setItem("eatery", JSON.stringify(response.data));
      returnVal = response.data;
    })
    .catch(error => {
      console.error(error); // for debugging maybe
    });

  return returnVal;
}

Или используйте async / await: 

loadEatery: async function() {
  console.log("Fetching Data");

  const returnVal = await axios.get(
      "//localhost:81/wp-json/wp/v2/posts?_embed&per_page=5&categories=2"
    )
    .catch(error => {
      console.error(error); // for debugging maybe
    });

  sessionStorage.setItem("eatery", JSON.stringify(response.data));
  return returnVal.data;
}
...