Vue3 登录注册(登录后显示用户姓名)

记录在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")
    },
  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值