In the process of vUE project, we sometimes encounter a problem, that is, the page data will be lost when the page is refreshed. The reason for this problem is that when vuEX is used for global state management, the data in store is stored in the running memory, and the VUE instance will be reloaded when the page is refreshed. The data in the store is reassigned, so the data is lost, as follows:

Solution 1:

Should first think of is to use localStorage/sessionStorage data stored in the external, do a persistence storage, the following is the concrete scheme of using localStorage storage:

Scheme 1: Since the data in state was reactive and the data was modified by mutation, the localstorage.setitem () method was called to store the data when the data in state was modified by mutation.

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

Vue.use(Vuex);

export default newVuex.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))},}})Copy the code

Localstorage.getitem () is used to retrieve data and put it back into vuex when the page is loaded. You can write the following code in app.vue’s Created () cycle function:

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

Scheme 2: SetItem () is not very performance friendly, and it seems that there is no need to use vuex for state management, just use localStorage. This solution is improved by listening for the beforeUnload event for localStorage of data, which is triggered when the page is refreshed, in app.vue’s Created () cycle function:

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))
    })
Copy the code

Solution two (recommended) :

This method is based on an understanding of computed attributes, and the official vUE documentation reads:

We can define the same function as a method rather than a computer property. The end result is exactly the same. The difference, however, is that computed properties are cached based on their reactive dependencies and are reevaluated only when the associated reactive dependencies change. This means that as long as the Message has not changed, multiple visits to the reversedMessage computed property will immediately return the previous computed result without having to execute the function again.

Therefore, we know that the result of calculating attributes will be cached. That is to say, in the case of cache, computed uses cache preferentially. Therefore, we can also write the following on the page corresponding to state data:

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

The article came from the Internet, and was deleted