As a beginner in Vuejs, I am working on a website that displays content fetched from the backend to the frontend. To achieve this, I am using Axios to connect to the API with the following code snippet:
contentList: [],
};
const mutations = {
setContent (state) {
axios
.get("http://backendapi/content")
.then(res => {
const data = res.data;
for (let key in data) {
const object = data[key];
state.contentList.push(object)
}
});
}
};
const actions = {
initContent: ({commit}) =>{
commit('setContent');
}
};
When my page loads, I populate the content list as follows:
mounted() {
this.$store.dispatch('initContent');
this.content = this.$store.getters.contentList
}
However, I am facing an issue where every time I navigate away and return to the page, the content in the list gets duplicated. Can someone guide me on how to improve this code to prevent double loading of content?
Thank you!