“This is the 8th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Hello, everyone, I touch fish small public, the real strong, will not complain, if you do not want to be looked down upon by others, you have to pay more than others ten times a hundred times more effort, to stand higher than others. The last article is JS anti – shake function and throttle function difference, article content is about the use of anti – shake function and throttle function. So today we are going to look at various solutions to the vuex page refresh data loss problem

Why is vuex data lost when refreshing the page

It is a normal phenomenon that vuex data will be lost when refreshing the page, because JS data is stored in the stack memory of the browser. When refreshing the page of the browser, the memory applied for by the stack is released, which is the operating mechanism of the browser, so the data in the stack will be emptied naturally.

The first method uses sessionStorage

Store the data returned by the interface in the Vuex store, and store this information in the sessionStorage. Note that vuex variables are responsive, sessionStorage is not. When you change the state in Vuex, components will detect the change, sessionStorage will not, the page has to refresh to see the change. So let the state in vuex be retrieved from sessionStorage so that components can change in response.

An example of a js file in the Store folder is shown below

const state = { authInfo: JSON.parse(sessionStorage.getItem("COMPANY_AUTH_INFO")) || {} } const getters = { authInfo: state => state.authInfo, } const mutations = { SET_COMPANY_AUTH_INFO(state, data) { state.authInfo = data sessionStorage.setItem("COMPANY_AUTH_INFO", JSON. Stringify (data))}} // Actions sessionStorage export default {namespaced: true, state, getters, mutations, //actions, }Copy the code

You can actually use localStorage, but it doesn’t have an expiration date; So sessionStorage is used, the session ends when the browser closes.

The second method is vuex-along

The sample is as follows

(1) Install vuex-Along

npm install vuex-along --save
Copy the code

(2) Add vuex-along to the index.js folder in the store folder and configure the relevant code

import Vue from 'vue' import Vuex from 'vuex' import indexOne from "./modules/indexOne" import VueXAlong from 'vuex-along' Vue.use(Vuex) const store=new Vuex.Store({ strict: false, modules:{ indexOne }, plugins: [VueXAlong({name: 'along', // localStroage or sessionStroage name local: {list: [], isFilter: {list: [], isFilter: })]}) export default store; if isFilter is set to true, the value of the list array will be filtered.Copy the code

The third option is vuex-PersistedState

The sample is as follows

(1) Install Vuex-PersistedState

npm install --save vuex-persistedstate
Copy the code

(2) Introduce vuex-PersistedState in index. Js in store folder and configure the code

import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) const store = new Vuex.Store({ modules: { user }, plugins: [createPersistedState({storage: window.sessionStorage, reducer(val) {return { val.base } } })] }) export default store;Copy the code

The fourth method is vuex-persist

The sample is as follows

(1) Install vuex-Persist

npm install --save vuex-persist
or
yarn add vuex-persist
Copy the code

(2) Add vuex-persist to the index.js folder in the store folder and configure the relevant code

import Vue from 'vue'
import Vuex from 'vuex'
import indexOne from "./modules/indexOne"
import VuexPersistence from 'vuex-persist'
Vue.use(Vuex)

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})

const store = new Vuex.Store({
    strict: false,
    modules:{
        indexOne,
    },
    plugins: [vuexLocal.plugin]
     
  }) 

export default store;
Copy the code

Conclusion:

In fact, there are many ways to solve this problem, basically is to use localStorage or sessionStroage to store. Well, this is the end of the article, welcome everyone (like + comment + attention) have a question can exchange with each other. I hope this article is helpful to you and I hope you can support me more. Today is the eighth day of my participation in the first Wenwen Challenge 2022. Come on!