用户登录成功以后,我希望在页头这里显示当前登录的用户的名字。 可以在组件里使用 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。
测试
在浏览器上测试一下,输入用户名,还有密码,点击登录。登录成功以后会设置当前用户数据的值,这样在页头这里会隐藏账户小图标,显示当前登录的用户的名字。