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
    评论
好的,我可以为您提供一些Vue的代码,以创建一个基本的用户中心页面。请注意,这是一个简单的示例,您需要根据您的具体要求进行修改和定制。 首先,您需要创建一个Vue组件来管理用户中心页面。在这个组件中,您可以使用Vue的数据绑定和计算属性来处理用户数据,并使用Vue的生命周期方法来处理页面的初始化和销毁。 以下是一个示例组件,它提供了一个用户列表和一个表格来显示每个用户的详细信息: ```html <template> <div class="user-center"> <h1>用户中心</h1> <table> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.id"> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td>{{ user.phone }}</td> <td> <button @click="editUser(user)">编辑</button> <button @click="deleteUser(user)">删除</button> </td> </tr> </tbody> </table> <div v-if="editingUser"> <h2>编辑用户</h2> <form @submit.prevent="saveUser"> <label> 姓名:<input type="text" v-model="editingUser.name"> </label> <label> 邮箱:<input type="email" v-model="editingUser.email"> </label> <label> 电话:<input type="tel" v-model="editingUser.phone"> </label> <button type="submit">保存</button> <button type="button" @click="cancelEdit">取消</button> </form> </div> </div> </template> <script> export default { data() { return { users: [ { id: 1, name: '张三', email: 'zhangsan@example.com', phone: '13311112222' }, { id: 2, name: '李四', email: 'lisi@example.com', phone: '13311113333' }, { id: 3, name: '王五', email: 'wangwu@example.com', phone: '13311114444' }, ], editingUser: null, } }, computed: { sortedUsers() { return this.users.sort((a, b) => a.name.localeCompare(b.name)) }, }, methods: { editUser(user) { this.editingUser = { ...user } }, deleteUser(user) { this.users = this.users.filter(u => u.id !== user.id) }, saveUser() { const existingUserIndex = this.users.findIndex(u => u.id === this.editingUser.id) if (existingUserIndex >= 0) { this.users.splice(existingUserIndex, 1, this.editingUser) } else { this.editingUser.id = this.users.length + 1 this.users.push(this.editingUser) } this.cancelEdit() }, cancelEdit() { this.editingUser = null }, }, created() { console.log('用户中心页面创建!') }, destroyed() { console.log('用户中心页面销毁!') }, } </script> <style> table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } th:first-child, td:first-child { border-left: 1px solid #ddd; } th:last-child, td:last-child { border-right: 1px solid #ddd; } button { margin: 8px; } </style> ``` 在这个示例中,我们首先定义了一个用户列表和一个编辑表单。然后,在Vue的`data`选项中,我们定义了一个`users`数组来保存用户数据,以及一个`editingUser`对象来保存当前正在编辑的用户。在`computed`选项中,我们定义了一个`sortedUsers`计算属性来顺序排列`users`数组中的用户。然后,在`methods`选项中,我们定义了一些方法来处理用户编辑、删除和保存。 当组件被创建时,我们使用Vue的`created`钩子函数来输出一条调试信息。当组件被销毁时,我们使用Vue的`destroyed`钩子函数来输出一条调试信息。 要将这个组件添加到您的Vue应用程序中,请按照以下步骤操作: 1. 在vue文件中导入这个组件; 2. 在Vue实例的`components`选项中注册该组件; 3. 在Vue模板中使用该组件的标签。 示例代码: ```html <template> <div> <!-- 其他页面内容 --> <user-center></user-center> </div> </template> <script> import UserCenter from './UserCenter.vue' export default { components: { UserCenter }, // 其他Vue配置项 } </script> ``` 这应该能够帮助您开始编写一个基本的Vue用户中心页面。请记住,这只是一个示例,您需要进一步定制和添加功能以满足您的特定要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值