Vuex数据长久化

在刷新页面时Vuex中的数据会重置，对于想要保留的状态同样也会重置
在Storage中数据能够长久化存储，然而在存储了太多数据时不利于状态的对立治理

外围：commit时备份一份数据在本地

以登录验证token为例

1.Storage的简略封装

// @/utiles/storage.jsconst Storage = class {    constructor(isLocal) {        this.isLocal = isLocal    }    has(key) {        if (this.isLocal) {            return Reflect.has(localStorage, key)        } else {            return Reflect.has(sessionStorage, key)        }    }    set(key, value) {        if (this.isLocal) {            localStorage.setItem(key, JSON.stringify(value))        } else {            sessionStorage.setItem(key, JSON.stringify(value))        }    }    get(key) {        if (this.has(key)) {            if (this.isLocal) {                return JSON.parse(localStorage.getItem(key))            } else {                return JSON.parse(sessionStorage.getItem(key))            }        }        return false    }    remove(key) {        if (this.has(key)) {            if (this.storageType) {                localStorage.removeItem(key)            } else {                sessionStorage.removeItem(key)            }            return true        }        return false    }    clear() {        if (this.isLocal) {            localStorage.clear()        } else {            sessionStorage.clear()        }    }}const local = new Storage(true)const session = new Storage(false)export { Storage, local, session }

2. Vuex

// @/store/modules/user.jsimport {local,session} from '@/utils/storage.js'import { request } from '@/api/request.js' //接口封装const user = {    namespaced:true,    state:{        loginInfo:{            userId:'',            pwd:'',        },        token:'',    },    mutations:{        SET_LOGININFO: (state,loginInfo)=>{            state.loginInfo = loginInfo            local.set('loginInfo',loginInfo)        },        SET_TOKEN:(state,token) => {            state.token = token            session.set('token',token)        }    },    actions:{        async Login({commit,state},loginInfo){            // 申请token            let token =await request('login',loginInfo)            commit('SET_LOGININFO',loginInfo)            commit('SET_TOKEN',token)        },        Logout({commit}){            commit('SET_TOKEN','')            session.clear()        }        persistUser({commit}){            commit('SET_LOGININFO',local.get('loginInfo'))            commit('SET_TOKEN',session.get('token'))        }    }}export default user

// @/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import user form './modules.js'Vue.use(Vuex)const store = new Vuex.Store({    modules:{        user    }})export default store

3. 路由守卫

// @/router/permission.jsimport {router} from './index.js'import store from '@/store/index.js'router.beforEach((to,from,next)=> {    store.dispatch('user/persistUser')    if(store.state.user.token){        if(to.path === '/login'){            next({path:'/'})        }else{            next()        }    }else {        next(`/login?redirect=${to.fullPath}`)    }})

在actions或组件中commit 将申请或者要批改的数据保留至state以及本地
刷新页面时在前置路由守卫或者组件挂载时dispatch 将本地的备份数据保留至state