How to retain status data when page refreshes vue single page application

In the Vue single page application, if you click Refresh on a specific page of a specific route, the status information of the page may be lost after refreshing. What should be done at this time? If you have this doubt, this article may help you

1. Problem

There is a requirement on the product now: the single page application goes to a specific page, and then click Refresh, and the refreshed page must be consistent with the page before refresh.

At this time, we need to save the status of the previous page.

2. A solution

In this Vue single page application, Wang Er uses Vuex as state management. At the beginning, Wang Er's idea was to synchronize and update the data in Vuex to localStorage.

That is: Once the data in vuex is changed, the method will be triggered, refer to the following code:

import Vue from "vue"
import Vuex from "vuex"
 
(Vuex)
 
function storeLocalStore (state) {
  ("userMsg",(state));
}
 
export default new ({
  state: {
    username: "Wang Er",
    schedulename: "title",
    scheduleid: 0,
  },
  mutations: {
    storeUsername (state,name) {
       = name
      storeLocalStore (state)
    },
    storeSchedulename (state,name) {
       = name
      storeLocalStore (state)
    },
    storeScheduleid (state,id) {
       = Number(id)
      storeLocalStore (state)
    },
  }
})

Then when the page is loaded, the data is retrieved from localStorage and put it in vuex. So Wang Er wrote the following code in the created hook function:

("userMsg") && this.$((("userMsg")));
 
//Consider the first time the project is loadedlocalStorageNo inuserMsgInformation，So make a judgment first

This will solve the problem more successfully.

3. Another solution

The above solution is not performance-friendly because it needs to trigger the method frequently. Moreover, if we keep synchronizing the data in vuex to localStorage, we will use localStorage directly for state management, and there seems to be no need to use vuex again.

At this time, Wang Er thought, how great it would be if there was any way to listen to the page refresh event and then store the data in Vuex in the localStorage in that listening method.

Fortunately, there is such a monitoring event. We can use beforeunload to achieve the above goals, so Wang ErWrite in the created hook functionThe following code was downloaded:

  //Read the status information in localStorage when the page is loading  ("userMsg") && this.$((("userMsg")));
  
  //Save the information in vuex to localStorage when the page is refreshed  ("beforeunload",()=>{
    ("userMsg",(this.$))
  })

In this case, it seems to be more perfect.

Added on March 27, 2018:

Wang Er encountered a problem when using the above method, which is: in the development stage, if a new field is added in Vuex, the new field cannot be saved in localStorage, so the above code is modified as follows:

  //Read the status information in localStorage when the page is loading  ("userMsg") && this.$((this.$,(("userMsg"))));
  
  //Save the information in vuex to localStorage when the page is refreshed  ("beforeunload",()=>{
    ("userMsg",(this.$))
  })

The above method of retaining status data when page refresh is the entire content shared by the editor. I hope it can give you a reference and I hope you can support me more.