记录在vue3学习中遇到的问题以及解决方法
登录注册其实很简单,当然,如果在一开始不会的状态下还是很难想出的。
我们可以给登录和注册按钮加v-if进行判断,当我们处于未登录的时候,我们让他显示,参数为true,此时用户的信息也绑定v-if,值和登录注册的值取反,我们可以用感叹号!来进行值的取反。当我们登录成功后,我们给把登录注册的值修改成false,这时候登录注册就不显示了,由于用户信息和登录注册取反,这时候用户信息就显示出来了,退出登录原理也和上面一致,当我们点击后,修改值来使其隐藏或显示。
关键
现在我们让v-if的参数命名为showname,这个值我们得定义到vuex中的state中
state:{
showname:true,
}
然后再 mutations中定义方法来对showname的值进行修改。
refresh(state){
state.showname = !state.showname
},
只要调用之后,就会对showname的值进行取反。
新问题
功能实现了,但是当我们刷新页面后,showname的值也会随之刷新,我们又得重新登录,这很麻烦。
解决办法
我们把showname的值放在sessionStorage中,让他保持着这个状态,我们再刷新也不会出现showname的值随之刷新的问题。
在登录按钮绑定的事件中加入:
this.$store.commit("refresh")
当我们点击登录之后,showname的值就会因为refresh发生改变。
读取session中的值
created() {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state));
})
},
点击退出登录后:
logout(){
this.$store.commit("refresh")
window.sessionStorage.clear()
window.location.reload()
this.$route.push("/Login")
},