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