11vue3实战-----封装缓存工具

news2025/2/12 2:08:09

11vue3实战-----封装缓存工具

1.背景
2.pinia的持久化思路
3.以localStorage为例解决问题
4.封装缓存工具

1.背景

在上一章节，实现登录功能时候，当账号密码正确，身份验证成功之后，把用户信息保存起来，是用的pinia。然而pinia一刷新之后内部的数据(比如token)就会消失。为了解决该问题，必须将pinia持久化。

2.pinia的持久化思路

常见的解决方法有sessionStorage和localStorage,大家可以根据公司的需求来选择。两种方法都能保证刷新时候pinia内部数据依然存在，只不过使用sessionStorage这种方法,当关闭浏览器的会话时候，数据会消失。

3.以localStorage为例解决问题

store/login/login.ts：

import { defineStore } from 'pinia'
import { accountLoginRequest } from '@/service/login/login'
import type { IAccount } from '@/types'
const useLoginStore = defineStore('login', {
  state: () => ({
    id: '',
    token: localStorage.getItem('token') ?? '',
    name: ''
  }),
  actions: {
    async loginAccountAction(account: IAccount) {
      // 1.账号登录, 获取token等信息
      const loginResult = await accountLoginRequest(account)
      this.id = loginResult.data.id
      this.name = loginResult.data.name
      this.token = loginResult.data.token
      // 2.进行本地缓存
      localStorage.setItem('token', this.token)
    }
  }
})
export default useLoginStore

以上就可以解决问题。但如果所有的数据都按以上的格式书写代码,比较麻烦。而且,当某些数据是复杂对象时候，用localStorage.setItem进行存储时候,需要用JSON.stringify将复杂对象转为字符串(localStorage、sessionStorage只能存储字符串类型的数据)。同时在state里面又需要将其用JSON.parse转回对象。
所以最好是将localStorage进行封装。

4.封装缓存工具

新建工具文件夹utils,新建一个cache.ts文件:
在这里插入图片描述
utils/cache.ts:

//枚举两种类型，表示localStorage和sessionStorage
enum CacheType {
  Local,
  Session
}

class Cache {
  //localStorage和sessionStorage都是Storage类型;
  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/login/login.ts中使用缓存工具:

import { defineStore } from 'pinia'
import { accountLoginRequest } from '@/service/login/login'
import type { IAccount } from '@/types'
import { localCache } from '@/utils/cache'
//这里把字符串'token'换成常量更规范,减少了拼错字符串的可能性，所有“login/token”的地方都可以用LOGIN_TOKEN ；
const LOGIN_TOKEN = 'login/token'
const useLoginStore = defineStore('login', {
  state: () => ({
    id: '',
    token: localCache.getCache(LOGIN_TOKEN) ?? '',
    name: ''
  }),
  actions: {
    async loginAccountAction(account: IAccount) {
      // 1.账号登录, 获取token等信息
      const loginResult = await accountLoginRequest(account)
      console.log(loginResult)
      this.id = loginResult.data.id
      this.name = loginResult.data.name
      this.token = loginResult.data.token
      // 2.进行本地缓存
      localCache.setCache(LOGIN_TOKEN, this.token)
    }
  }
})

export default useLoginStore