Solutions to data loss caused by vuex page refresh

Solve the problem of data loss caused by vuex page refresh

vuex data exists in memory, and vuex data will naturally be lost after the page is refreshed. We have two ways to solve this problem:
1. Use vuex-along
2. Use localStorage or sessionStroage

1. Use vuex-along

The essence of vuex-along is to store the data in vuex in localStorage or sessionStroage. However, this access component will help us complete. We only need to use vuex to read data. Let’s briefly understand the usage method of vuex-along.

Install vuex-along:

npm install vuex-along --save

Configure vuex-along: Finally add the following code in store/:

import VueXAlong from 'vuex-along' //Import plugins

export default new ({
  //modules: {
    //controller //modular vuex  //},
  plugins: [VueXAlong({
    name: 'store',   //The name stored in localStroage or sessionStroage    local: false,   // Whether to store it in local false not stored If stored, follow the following session configuration    session: { list: [], isFilter: true } //If the value is not false, then the object can be passed. When isFilter is set to true, the values ​​in the list array will be filtered and adjusted, and these values ​​will not be stored in seesion or local  })]
});

2. Use localStorage or sessionStroage

created() {
  //Read the status information in sessionStorage when the page is loading  if (("store")) {
   this.$(
    (
     {},
     this.$,
     (("store"))
    )
   );
  }
  //Save the information in vuex to sessionStorage when the page is refreshed  ("beforeunload", () => {
   ("store", (this.$));
  });
},

Both of the above methods can solve the problem of data loss caused by vuex page refresh. After configuring the above method, you can use vuex normally, and the page refresh data will not be lost.

The above is the detailed content of the solution to data loss caused by vuex page refresh. For more information about vuex data loss, please follow my other related articles!