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

Question

目前实现的效果:

1.刷新 和 跳转任何页面都会跳到登录页面

2.路由拦截屏蔽后,刷新页面vuex里的数据都消失了

问题:

1.设置路由拦截后,实现了不登录全跳转至登录页面,但是刷新也都跳转到登录页面

2.路由拦截屏蔽后,刷新页面vuex里的数据都消失了,知道可以存在localStorage,但是具体的怎么实现呢?

3.用户数据少可以存在localStorage里,但是主页的所有数据就不少了,难道也存在里面吗?

4.可不可以让刷新页面和路由拦截结合起来,刷新页面再请求用户数据和当前页面的数据,具体怎么实现?

最终实现结果:刷新后依然保持在当前页面,并且数据不消失

代码:

index

import 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;

mutations

export 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;

actions

main.js

Answer 1

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

Answer 2

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