如何在vuejs3中设置与本地存储类似的结构

我正在与vuejs3合作一个项目。我需要在全球某个地方保存一些数据,然后调用另一个页面。我曾使用本地存储来实现这一点,但感觉不太对劲,随着项目的发展,管理起来也越来越困难。

在用户登录时

lookie.set("userType", "student")

在另一个组件上

lookie.get("userType")

例如,项目中有两种用户类型,即学生和教师,我在用户登录时将其用户类型保存在本地存储中,如果本地存储中的用户类型是学生,我不会显示一些组件。 我使用了状态结构,但它不适用于我,因为当页面刷新时,它会恢复为默认值。你认为我应该建立什么样的结构?