用户登录

用户登录成功以后,我希望在页头这里显示当前登录的用户的名字。 可以在组件里使用 useState 创建一个数据,给数据起个名字,再设置一下它的值,在其它组件那里,使用 useState 得到这个数据的值。

打开 login 这个页面组件,在组件的脚本里面准备一下表示当前用户的数据,声明一个 currentUser,用一下 Nuxt 提供的 useState ,给数据起个名字叫 currentUser,在其它组件那里使用这个名字可以得到它的值。

改造一下 login 这个方法,请求登录以后,判断一下 data.value,如果有值,就设置一下 currentUser.value ,让它等于 data.value,也就是请求登录接口成功以后得到的数据。

default.vue

打开 default 组件,在组件的脚本这里,声明一个 currentUser,用一下 useState,数据的名字是 currentUser。

在组件模板这里,先在这个账户小图标的包装元素上,用 v-if 指令判断一下 !currentUser ,这样只有在当前用户数据里没有值的时候才会显示这个小图标。

在它下面再添加一组 div,上面用 v-if 判断一下 currentUser,如果当前用户里面有值,可以绑定输出 currentUser.name。

测试

在浏览器上测试一下,输入用户名,还有密码,点击登录。登录成功以后会设置当前用户数据的值,这样在页头这里会隐藏账户小图标,显示当前登录的用户的名字。

使用 Nuxt 提供的 useState 管理应用状态《 Nuxt.js:用户登录 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点