用户登录成功以后，我希望在页头这里显示当前登录的用户的名字。 可以在组件里使用 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。

测试

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