0
193
VistasVue3 refresh loses data
forEach() cannot get all element from an Proxy array?
I have a local database with 4 users. I use dynamic router [ http://localhost:8080/user/:id ] ,to get their id as a prop . and render a card with user datas.
every thing runs smoothly when I run locally. Then I add a register as a user function. I use fetch() to send data to "firebase" , and get data from "firebase" to render this card.
Now,I have 4 users' data are still in LOCAL,1 user's data is at SERVER. I want to render them together.I fetch the server side data ,and merge to local data array.
[mystery occurs here!]
I use unshift() method,so Local data have 5 users.
When I enter the page by '<router-link>' ,5 objects can be accessed. However, when I reload this page by [chrome browser refresh button] . Only 4 objects available.
I can see 5 objects in Proxy ,just cannot get it.Test the proxy length ,is 4.
methods: {
async loadTutors() {
//loading
await this.$store.dispatch["homepage/loadTutors"];
console.log("received");
//loading will unshift the data,getters can get it.
const tutors = await
this.$store.getters["homepage/tutor"];
console.log(tutors); //I can get 5 obj here
tutors.forEach((el) => console.log(el)); //only
get 4 obj here????
this.loading = false;
}
}
Question solved.Please look at the answer~
1 Respuestas
Responde la pregunta0
This problem emerge is because Vue3 will lost data storage in memory when refresh. We need to store it.
Add blow to [app.vue] ....
<script>
export default {
created(){
//when loading access to data which is stored in sessionStorage
if(sessionStorage.getItem('storeState')){
//replaceState
this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('storeState'))))
}
//when refresh store vuex data to sessionStorage
window.addEventListener('beforeunload',()=>{
sessionStorage.setItem('storeState',JSON.stringify(this.$store.state))
})
}
}
</script>
TIPS：
this solution will have an impact on Vuex. cause the fail of data updated.Hope someone can improve this solution.
I now re-fetch the data when the needed data is not in Proxy.
3. Also,there is an plugin in github : https://github.com/robinvdvleuten/vuex-persistedstate
(However ,it is deprecated. )