Vue中使用vuex，页面刷新登录状态不丢失,退出登录后清空登录状态的解决方法

前端小白，最近使用vue做用户的登录/退出，在开发过程中遇到的一些问题，记录下来。

由于vue自身特性的原因，vuex中的数据在页面刷新之后其中的数据会初始化，这就导致组件之间通过vuex传递的数据在用户f5刷新页面之后会丢失。

搜索了一些方法，使用localStorage实现页面刷新之后数据不丢失的方法

代码如下

vuex

const state = {
userInfo: JSON.parse(localStorage.getItem("userInfo")) || {},//先去localStorage中获取数据
}
const mutations = {
setuserInfo(state, v) {
localStorage.setItem('userInfo', JSON.stringify(v));//将传递的数据先保存到localStorage中
state.userInfo = v;// 之后才是修改state中的状态
},
}

组件中使用

if (rst.data.status == 1) {
//登录成功
let userInfo = rst.data.userInfo
this.$store.commit("setuserInfo", userInfo);//更新userInfo
}

做到这里，登录成功后F5刷新页面，登录状态依旧保持了。（一阵狂喜）
但是当点击退出后，虽然发送后台退出成功了，但是页面登录状态还是依旧保持。。。因此需更新userInfo值为空

代码如下

if (rst.data.status == 1) {
//退出成功
this.$store.commit('setuserInfo','');//更新userInfo
}

到这里，遇到的问题完美解决了。
前端小白，如代码中有什么不足请多多指教哦！