怎样使刷新不跳转页面,vuex数据也不消失

Question

目前实现的效果:1.刷新 和 跳转任何页面都会跳到登录页面2.路由拦截屏蔽后,刷新页面vuex里的数据都消失了问题:1.设置路由拦截后,实现了不登录全跳转至登录页面,但是刷新也都跳转到登录页面2.路由拦截屏蔽后,刷新页面vuex里的数据都消失了,知道可以存在localStorage,但是具体的怎么实现呢?3.用户数据少可以存在localStorage里,但是主页的所有数据就不少了,难道也存在里面吗?4.可不可以让刷新页面和路由拦截结合起来,刷新页面再请求用户数据和当前页面的数据,具体怎么实现?最终实现结果:刷新后依然保持在当前页面,并且数据不消失代码:indeximport Vue from 'vue';import Vuex from 'vuex';import getters from './getters';import actions from './actions';import mutations from './mutations';Vue.use(Vuex);const state = {  token: '',  isLogin: false, // 用户是否登录  userInfo: {  // 用户信息    id: '',       // 用户id    name: '',     // 用户名字    deptId: '',   //    realName: '', // 用户真实名字    avatar: '',   // 用户头像    roles: '',    // 用户权限  }};const store =  new Vuex.Store({  state,  getters,  actions,  mutations});export default store;mutationsexport const mutations = {  SET_TOKEN: (state, token) => {    state.token = token  },  SET_ISLOGIN: (state, isLogin) => {    state.isLogin = isLogin  },  SET_ID: (state, id) => {    state.userInfo.id = id  },  SET_NAME: (state, name) => {    state.userInfo.name = name  },  SET_DEPTID: (state, deptId) => {    state.userInfo.deptId = deptId  },  SET_REALNAME: (state, realName) => {    state.userInfo.realName = realName  },  SET_AVATAR: (state, avatar) => {    state.userInfo.avatar = avatar  },  SET_ROLES: (state, roles) => {    state.userInfo.roles = roles  },};export default mutations;actionsmain.js

Answer 1

使用把登录状态储存在sessionStorage中方法解决的,链接描述

Answer 2

我说一下我的想法，希望对你有所帮助！
1、刷新相当与重启项目，之前获取到的数据也只是通过store暂存起来，项目关闭时就不见了，这有些像电脑重启，存储在RAM的数据会消失。
2、既然是刷新，用localStorage的话你关闭浏览器或者标签数据还在，这样用户体验不好，而且随着数据增多，没有及时删除的话，会导致更新项目的时候以前的数据冲突，这时候最好是使用sessionStorage，和localStorage差不多，差别在于关闭标签或者浏览器时数据就会自动清除。
3、对于提到的前面主页保存的数据，当然也要保存到sessionStorage中，虽然保存的大小有限制，但是一般项目数据绝对是够装的。
4、项目加载时，可以在created先进行判断sessionStorage是否存在对应的数据，有的话，将数据commit到store中去，没有就正常加载，发送请求来请求数据等一系列操作。