ts封装localStorage，sessionStorage，在vue3中使用

我定义了一个 Cache 类，它可以通过构造函数选择使用 localStorage 或 sessionStorage 存储缓存数据。setCache 方法可以将一个 key-value 对存储到缓存中，getCache 方法可以根据给定的 key 获取对应的 value，removeCache 方法可以删除一个缓存项，clear 方法可以清空存储的所有缓存数据。

通过 localCache 和 sessionCache 这两个实例，我们可以创建 localStorage 和 sessionStorage 的缓存实例，并通过它们来存储和获取数据。这种设计可以使我们在不同的存储场景下使用相同的 API，降低开发难度，并且很容易进行扩展，比如可以增加一个 RedisCache 类来支持使用 Redis 进行缓存

enum CacheType {
  Local,
  Session
}

class Cache {
  storage: Storage

  constructor(type: CacheType) {
    this.storage = type === CacheType.Local ? localStorage : sessionStorage
  }

  setCache(key: string, value: any) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }

  getCache(key: string) {
    const value = this.storage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }

  removeCache(key: string) {
    this.storage.removeItem(key)
  }

  clear() {
    this.storage.clear()
  }
}

const localCache = new Cache(CacheType.Local)
const sessionCache = new Cache(CacheType.Session)

export { localCache, sessionCache }

这里 store 用于管理登录相关的状态和行为。

在 state 中，定义了三个状态属性：id、token 和 name。id 初始值为空字符串，token 的初始值是通过调用 localCache.getCache('token') 来获取的本地缓存值，如果不存在缓存值，则取空字符串。name 初始化为一个空字符串。

在 actions 中，定义了一个异步的 loginAccountAction 方法，用于处理账号登录的逻辑。在这个方法中，首先调用了 accountLoginRequest 方法来进行账号登录并获取登录结果，然后通过 loginResult.data 来获取返回的登录信息，包括 id、token 和 name。接着，将这些信息分别赋值给 store 中的对应状态属性。

最后，通过调用 localCache.setCache('token', this.token) 将登录成功后的 token 保存到本地缓存中，以便在页面刷新后仍然可以获取到登录状态。

总的来说，这段代码实现了登录的逻辑，通过 Vuex 管理登录相关的状态，将登录后的 token 保存到本地缓存中。

const useLoginStore = defineStore('login', {
  state: () => ({
    id: '',
    token: localCache.getCache('token') ?? '',
    name: ''
  }),
  actions: {
    async loginAccountAction(account: IAccount) {
      // 账号登录，获取token等信息
      const loginResult = await accountLoginRequest(account)
      // console.log(loginResult)
      this.id = loginResult.data.id
      this.token = loginResult.data.token
      this.name = loginResult.data.name

      // 进行本地缓存
      localCache.setCache('token', this.token)
    }
  }
})