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')
	},