Vuex数据持久化会在页面刷新的时候重置Vuex中的数据，同时也会重置你想要保持的状态。Storage中的数据可以持久化存储，但存储过多数据时不利于状态的统一管理。核心：提交时在本地备份数据副本。以登录验证token为例1.Storage的简单封装//@/utiles/storage.jsconstStorage=class{constructor(isLocal){this.isLocal=isLocal}has(key){if(this.isLocal){返回Reflect.has(localStorage,key)}else{returnReflect.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){returnJSON.parse(localStorage.getItem(key))}else{returnJSON.parse(sessionStorage.getItem(key))}}returnfalse}remove(key){if(this.has(key)){if(this.storageType){localStorage.removeItem(key)}else{sessionStorage.removeItem(key)}returntrue}returnfalse}clear(){if(this.isLocal){localStorage.clear()}else{sessionStorage.clear()}}}constlocal=newStorage(true)constsession=newStorage(false)export{Storage,local,session}2.Vuex//@/store/modules/user.jsimport{local,session}from'@/utils/storage.js'import{request}from'@/api/request.js'//接口封装constuser={namespaced:true,state:{loginInfo:{userId:'',pwd:'',},token:'',},mutations:{SET_LOGININFO:(state,loginInfo)=>{state.loginInfo=loginInfolocal.set('loginInfo',loginInfo)},SET_TOKEN:(state,token)=>{state.token=tokensession.set('token',token)}},actions:{asyncLogin({commit,state},loginInfo){//请请求令牌lettoken=awaitrequest('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'))}}}exportdefaultuser//@/store/index.jsimportVuefrom'vue'importVuexfrom'vuex'importuserform'./modules.js'Vue.use(Vuex)conststore=newVuex.Store({modules:{user}})exportdefaultstore3.路由守卫//@/router/permission.jsimport{router}from'./index.js'importstorefrom'@/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}`)}})commitinactionsorcomponents将请求或要修改的数据保存到状态并在本地刷新页面Dispatch保存本地备份数据到routeguard或组件挂载时的状态
