vue 页面刷新后用户信息没有了处理方式

需求:当用户登录时,数据存入了vuex中在页面通过store去取数据,但是页面刷新的时候,用户数据全不见了

解决方法:

登录的时候信息存入vuex之外;还需要把数据存入本地存储这样当页面刷新时如果取不到store中的数据,我们可以取sessionStorage中的数据

export default {
	state:{
		user:{},
		token:false
	},
	getters:{
		
	},
	mutations:{
		// 页面刷新时防止信息丢失可以掉用本地存储获取用户信息
		initUser(state){
			let user = window.sessionStorage.getItem('user')
			if(user){
				state.user = JSON.parse(user)
				state.token = state.user.token
			}
		},
		// 登录
		login(state,user){
			// 保存登录状态
			state.user = user
			state.token = user.token
			// 存储到本地存储
			window.sessionStorage.setItem('user',JSON.stringify(state.user))
			window.sessionStorage.setItem('token',state.token)
		},
		// 退出登录
		logout(state){
			// 清除状态
			state.user = {}
			state.token = false
			// 清除本地存储
			window.sessionStorage.clear()
		}
	},
	actions:{
		
	}
}

然后在app.vue中调用本地存储,因为每次页面刷新的时候都会调用 app.vue

	created() {
		// 初始化用户信息
		this.$store.commit('initUser')
	},