Блог

Главная - Вопросы по программированию - nuxt, как только вы попадаете на страницу, иногда fetch hook не вызывает api, вместо этого я получаю кэшированные данные

nuxt, как только вы попадаете на страницу, иногда fetch hook не вызывает api, вместо этого я получаю кэшированные данные

#javascript #vue.js #fetch #nuxt.js #server-side-rendering

Вопрос:

У меня есть страница, назовем ее pageA в моем приложении nuxt, чей поисковый крючок вызывает мое действие vuex, которое вызывает api:

 // pageA
//template
<componentA />

//script, fetch hook on pageA
    try {
      await store.dispatch("myList");
    } catch (e) {
      error({
        message: "error"
      });
    }
 
 // my store
export const state = () => ({
  listItems: null,
});

export const actions = {
  async myList({ commit }) {
    await axios
      .get(
        `${url}`,
        {
          headers: {
            ["key"]: "abcd123"
          }
        }
      )
      .then(data => {
        if(data amp;amp; data.status === 200){
          let results = data.data
          list = JSON.parse(JSON.stringify(results));
          commit("SET_LIST", list);
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
}
SET_LIST(state, list) {
  state.listItems = list;
},

А затем я получаю состояние listItem из магазина <componentA> , которое я импортирую на своей странице:

 //this is componentA:
//template 

<div v-for="lists in list" :key="list.id"
<componentB
  :name="lists.name"
  :color="lists.color"
  // and so on
></componentB>

//script
  computed: {
    ...mapState(["list"])
  }

myList API, который я вызываю из pageA api fetch hook, работает большую часть времени, но проблема в том, что иногда он не вызывается при загрузке страницы (или возвращении на страницу), поэтому иногда он не работает. Для сравнения, я вызываю другой API в componentB fetch hook с той же архитектурой (через магазин), и он работает каждый раз при загрузке страницы. Кто-нибудь знает, в чем проблема?

Ответ №1:

У меня была та же проблема, и, наконец, из-за fetch механизма кэширования и метки времени, я решил использовать asyncData в этой ситуации или использовать другой метод, например refresh , и вызвать this.$fetch его.

Метки: , , ,