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

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.idthis.name = loginResult.data.namethis.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: Storageconstructor(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.idthis.name = loginResult.data.namethis.token = loginResult.data.token// 2.进行本地缓存localCache.setCache(LOGIN_TOKEN, this.token)}}
})export default useLoginStore

当然除了自己封装缓存工具,还可以用pinia持久化插件------pinia-plugin-persistedstate解决问题。可上网自行搜索一下。(https://blog.csdn.net/qq_44741577/article/details/135959968)。