处理刷新页面vuex丢失

keepState.js

export default class KeepState{
    constructor(obj){
        let config = {
            storage:'sessionStorage',
            store:null,
            key:'KEEPSTATE',
            state:[]
        }
        Object.assign(config,obj)
        if(config.store&&config.state.length){
            this.handlerState(config)
        }
    }
    handlerState(config){
        let {store,state,storage,key} = config;
        let localState = window[storage][key]?JSON.parse(window[storage][key]):{};
        //将本地的state合并到store中
        state.forEach(state=>{
            if(state.includes('.')){
                let mod = state.split('.')
                let ms = Object.assign(
                    {},
                    store.state[mod[0]],
                    {
                        [mod[1]]:localState[state]?localState[state]:store.state[mod[0]][mod[1]]
                    }
                )
                store.replaceState(
                    Object.assign(
                        {},
                        store.state,
                        {
                            [mod[0]]:ms
                        }
                    )
                )
            }else{
                store.replaceState(
                    {},
                    store.state,
                    {
                        state:localState[state]?localState[state]:store[state]
                    }
                )
            }
        })
        //合并后删除本地的state
        window[storage].removeItem(key)
        //监听页面刷新前，将store中的state存到本地
        window.addEventListener('beforeunload',()=>{
            let value = {};
            state.forEach(stateKey=>{
                if(stateKey.includes('.')){
                    let mod = stateKey.split('.')
                    value[stateKey] = store.state[mod[0]][mod[1]]
                }else{
                    value[stateKey] = store.state[stateKey]
                }
            })
            window[storage].setItem(key,JSON.stringify(value))
        })
    }
}

App.vue中使用

<template>
    <div id="app">
    </div>
</template>

import KeepState from '@/utils/keepState.js'
import store from '@/store/index'
export default{
    name:'App'
    created(){
        new KeepState({
            store,
            state:['activemenu','user.username']
        })
    }
}