Vue3 refresh loses data

Question

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~

@Jhecht the tutors.length is 4. I update the image in questions. It means its real target is 4. I wonder why I can see 5 .. I think may be because proxy doesn't give the value an index number? It's like an unreliable figure in math.... — Miki U, May 16 '22 at 21:21
I find the solution. It's because refresh causes the lost of data in internal memory. — Miki U, May 16 '22 at 22:18

Miki U · Answer 1 · 2022-05-18T20:11:30.487

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. )

Vue3 refresh loses data

1 Answers1