0
196
VisualizaçõesLa actualización de Vue3 pierde datos
forEach () no puede obtener todos los elementos de una matriz Proxy?
Tengo una base de datos local con 4 usuarios. Uso el enrutador dinámico [http://localhost:8080/user/:id], para obtener su identificación como accesorio. y renderizar una tarjeta con los datos del usuario. 
todo funciona sin problemas cuando ejecuto localmente. Luego agrego un registro como una función de usuario. Uso fetch() para enviar datos a "firebase" y obtengo datos de "firebase" para renderizar esta tarjeta.
Ahora, tengo los datos de 4 usuarios todavía en LOCAL, los datos de 1 usuario están en SERVIDOR. Quiero renderizarlos juntos. Obtengo los datos del lado del servidor y los fusiono con la matriz de datos local.
[¡El misterio ocurre aquí!]
Uso el método unshift(), por lo que los datos locales tienen 5 usuarios.
Cuando entro en la página por '<enlace de enrutador>', se puede acceder a 5 objetos. Sin embargo, cuando vuelvo a cargar esta página con [botón de actualización del navegador Chrome] . Solo 4 objetos disponibles.
Puedo ver 5 objetos en Proxy, simplemente no puedo obtenerlos. Pruebe la longitud del proxy, es 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; } } 
Pregunta resuelta. Mire la respuesta ~
1 Respostas
Responde à pergunta0
Este problema surge porque Vue3 perderá el almacenamiento de datos en la memoria cuando se actualice. Necesitamos almacenarlo.
Agregar golpe a [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>PUNTAS:
esta solución tendrá un impacto en Vuex. causar la falla de los datos actualizados. Espero que alguien pueda mejorar esta solución.
Ahora vuelvo a recuperar los datos cuando los datos necesarios no están en Proxy.
3. Además, hay un complemento en github: https://github.com/robinvdvleuten/vuex-persistedstate
(Sin embargo, está en desuso).