退出登录就是把当前用户数据的值设置成 null,再把放在浏览器本地存储里的当前用户数据也删除掉。
新建一个文件,放在 composables 里面,名字是 use-logout.ts,文件里定义并导出一个函数,名字叫 useLogout。 函数里定义一个 currentUser ,用一下 useState,状态的名字叫 currentUser。 下面设置一下 current.value 的值,让它等于 null。
再用一下 useLocalStorage,本地存储数据的名字叫 currentUser,第二个参数是 null,这样会把存储在本地存储里的名字是 currentUser 的这个数据删除掉。
default
打开 default 这个组件,在这个登录小图标的下面,添加一组 div,元素上用 v-else 指令,元素里添加一个图像元素,图像文件的地址是 /icons/logout.svg,alt 属性的值是退出登录,绑定元素的 click 事件,用 useLogout 来处理这个事件。
测试
在浏览器测试一下,当前是登录状态,所以在页面头部这里会显示一个退出登录小图标,点击这个小图标,会执行 useLogout。它会把当前用户设置成 null,也会将放在浏览器本地存储里的 currentUser 这条数据删除掉。