vue 中使用vuex和localStorage保存登录状态
Posted yaya-003
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 中使用vuex和localStorage保存登录状态相关的知识,希望对你有一定的参考价值。
需求:
在写vue时,将用户信息保存在vuex中,但是F5刷新之后,用户信息没有了,需要重新登陆。每次都重新登陆会导致用户体验不好。
原理:
vuex中的数据在页面刷新之后其中的数据会初始化,这就导致组件之间通过vuex传递的数据在用户F5刷新页面之后会丢失
解决办法:使用vuex和localStorage保存登录状态
话不多说,上代码!!!
vuex中:
const state = { //先去localStorage中获取数据 userInfo: JSON.parse(localStorage.getItem("userInfo")) || {}, } const mutations = { setuserInfo(state, v) { //将传递的数据先保存到localStorage中 localStorage.setItem(‘userInfo‘, JSON.stringify(v)); // 之后才是修改state中的状态 state.userInfo = v; }, }
组件中逻辑:在登录成功之后提交mutations,更改用户信息
if(res.data.code === 0){ this.user = res.data.data this.$store.commit("setuserInfo", this.user); this.$Message[‘success‘]({ background: true, content: ‘登陆成功,即将跳转...‘ }); this.$router.push(‘/chat‘) }
组件中逻辑:退出也要更新信息(注意不要写成null,要写成‘‘)
this.$store.commit(‘setuserInfo‘,‘‘);//更新userInfo
以上是关于vue 中使用vuex和localStorage保存登录状态的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Vue.js + Vuex (createStore) 将“状态”变量保存到浏览器 localStorage
如何使用 localStorage 修复 Vuex 中的 JSON 解析错误
Vuex/Vuejs:在 vuex 存储中访问 localStorage