微信公众号怎么做成微网站,万网网站发布,中国住房与城乡建设厅网站,网络直播平台11vue3实战-----封装缓存工具 1.背景2.pinia的持久化思路3.以localStorage为例解决问题4.封装缓存工具 1.背景
在上一章节#xff0c;实现登录功能时候#xff0c;当账号密码正确#xff0c;身份验证成功之后#xff0c;把用户信息保存起来#xff0c;是用的pinia。然而p… 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.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)。
