In my Nuxt app, I have a page referred to as pageA. The fetch hook on this page calls a Vuex action that in turn calls an 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 && 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;
},
The data from listItem is then accessed from the store state in my <componentA> that is imported into pageA:
//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"])
}
The API myList called from the fetch hook on pageA works most of the time, but there are instances when it is not triggered upon page load (or when returning to the page). In contrast, another API called in the fetch hook of componentB within the same architecture (via the store) always works upon page load. Can anyone shed light on why this might be happening?