Solve vue page refresh, data loss

In the process of doing vue projects, sometimes there is a problem, that is, when the page is refreshed, the data of the page will be lost. The reason for this problem is because when vuex is used for global state management, the data in the store is Saved in the running memory, the vue instance will be reloaded when the page is refreshed, and the data in the store will be reassigned, so the data is lost. The solution is as follows:

Solution one:

The first thing that comes to mind should be to use localStorage/sessionStorage to store data externally to make a persistent storage. The following is a specific solution for using localStorage storage:

Solution 1: Since the data in the state is responsive, and the data is modified through mutation, the localStorage.setItem() method is called to store the data while modifying the data in the state through mutation.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store（{
    state: {
       orderList: [],
       menuList: []
   },
    mutations: {
        orderList(s, d) {
          s.orderList= d;
          window.localStorage.setItem("list",jsON.stringify(s.orderList))
        },  
        menuList(s, d) {
          s.menuList = d;
          window.localStorage.setItem("list",jsON.stringify(s.menuList))
       },
   }
}）

When the page is loaded, use localStorage.getItem() to retrieve the data and put it back into vuex. You can write the following code in the created() periodic function of app.vue:

if (window.localStorage.getItem("list") ) {
        this.$store.replaceState(Object.assign({}, 
        this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}

Solution 2: Solution 1 can solve the problem smoothly, but constantly triggering the localStorage.setItem() method is not particularly friendly to performance, and it seems that there is no need to use vuex for state management when the data is synchronized to localStorage. You can use localStorage directly. Therefore, the above solution is improved. The localStorage storage of data is performed by monitoring the beforeunload event, and the beforeunload event is triggered when the page is refreshed. The specific method is to write the following code in the created() cycle function of App.vue:

if (window.localStorage.getItem("list") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
    } 

window.addEventListener("beforeunload",()=>{
        window.localStorage.setItem("list",JSON.stringify(this.$store.state))
    })

Solution two (recommended):

This method is based on the understanding of computed properties. There is such a paragraph in the official vue document:

We can define the same function as a method instead of a computer property. The final result of the two methods is indeed exactly the same. However, the difference is that calculated attributes are cached based on their reactive dependencies and only re-evaluated when the related reactive dependencies change. This means that as long as the message has not changed, multiple accesses to the reversedMessage calculation property will immediately return the previous calculation result without having to execute the function again.

From this we know that the result of the calculated attribute will be cached, that is to say, in the case of cache, computed will give priority to the cache, so you can also write in the page corresponding to the state data:

computed:{
   orderList() {
       return this.$store.state.orderList
   }
}

Article from the Internet, intrusion