The original way to save data after a page refresh was to store it in the browser’s sessionStorage and localStorage, but now you can also use Vuex to store data

Vuex vs. sessionStorage:

Vuex advantage: Data storage is more secure than sessionStorage because sessionStorage data can be seen in the console

Vuex disadvantage: After the page is refreshed, Vuex will update state again and the stored data will be lost

Vuex can do global state management, but the loss of data when refreshing the page can make project development tricky. There are two solutions

1. Manually utilize the local storage

Since we lose state data during page refresh, we can save state data to sessionStorage before page refresh and then refresh the page. We can use beforeUnload, but we can’t listen for this event on every page, so we put it in the app.vue entry file to ensure that this event is triggered every time the page is refreshed.

The specific code is as follows:

export default { name: 'myApp', If (sessionStorage.getitem ("store")) {if (sessionStorage.getitem ("store")) { this.$store.replaceState(Object.assign({}, Parse (sessionStorage.getitem ("store"))))} // Save vuex information to sessionStorage when the page is refreshed window.addEventListener("beforeunload",()=>{ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) }) } }Copy the code

But writing it manually is a lot of trouble, so we can use plug-ins

2. Use vuex-PersistedState

The principle of this plug-in is also a combination of storage methods, but unified configuration does not need to manually write storage methods

Specific use methods are as follows:

(1) Installation

npm install vuex-persistedstate --save
Copy the code

(2) Import and configure in index.js under store

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        createPersistedState(),  
    ],
})
Copy the code

This is the default storage to localStorage, if you want to store to sessionStorage, the configuration is as follows

import { createStore } from 'vuex' import createPersistedState from 'vuex-persistedstate' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { }, plugins: [// Store vuex to sessionStorage createPersistedState({storage: window.sessionStorage,}),],})Copy the code

You can also store it in cookies

By default, all states are persisted. If you want to store the specified state, the configuration is as follows

import { createStore } from 'vuex' import createPersistedState from 'vuex-persistedstate' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { }, plugins: [// Store vuex data to sessionStorage createPersistedState({storage: SessionStorage, Reducer (val) {return {// only state userData userData: val.userdata}}),],})Copy the code

API

Key: The key that stores persistent state (default VUex)

Paths: An array of any paths that are partially persistent states. If no path is given, the complete state is persistent. (Default: [])

Reducer: a function that will be called to persist the state based on a given path. These values are included by default.

Subscriber: a function that is called to set the mutation subscription. The default is store => handler => store.subscribe(handler)

Storage: instead of (or with) getState and setState. The default value is localStorage.

GetState: The function that will be called to rehydrate the previously persistent state. Storage is used by default.

SetState: The function that will be called to preserve the given state. Storage is used by default.

Filter: The function that will be called to filter any mutations that will eventually trigger the store with setState. Default: () => true