Vue3+Ts實現(xiàn)緩存功能的示例代碼
更新時間：2024年03月08日 11:09:11 作者：大陽光男孩
這篇文章主要為大家詳細介紹了Vue3+Ts如何實現(xiàn)緩存,用戶搜索詞本地排名,延遲消費或者消息隊列,用戶簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下
幫助類具體代碼
import { onMounted, ref } from "vue";
import emitter from '@/utils/mitt'
interface Prop {
exp: number;
key: string;
data: any;
tag?: any;
}
export default function(){
// 緩存的倉庫
let cacheStore = ref( {} as Map< string, Prop >);
// 用于本地排名
let ranking = ref( {} as Map< string, any[] > );
// 延遲隊列
let delayMsg = ref( {} as Map< string, any[] > );
// 用戶簽到打卡
let sign = ref( {} as Map< string, any[] > );
// 限流
let limiting = ref( {} as Map< string, number> );
function limit( key : string ) {
if (limiting.value.has(key)) {
let temp = limiting.value.get(key) as number;
limiting.value.set(key,temp + 1);
}else {
limiting.value.set(key,1);
}
}
function takeLimit( key : string ) : number {
return limiting.value.get(key) as number;
}
function delLimit( key : string ) {
limiting.value.delete(key);
}
// 放入打卡的數(shù)據(jù)
function punchSetting( key : string , signInData : number[]) {
sign.value.set(key,signInData);
}
// 打卡
function startSign( key : string , day : number ): boolean {
let signInData = sign.value.get(key) as any[];
if (signInData) {
signInData.splice(day - 1,1,1);
return true;
}
return false;
}
// 返回連續(xù)打卡的天數(shù)
function continuousClocking( key : string ) : number {
if(sign.value.size > 0) {
let signInData = sign.value.get(key) as any[];
if (signInData) {
let day = 1;
let continuous : any[] = [];
signInData.forEach( (value, index) => {
if(signInData[index] === signInData[index+1] && value ==1) {
day++;
}else {
continuous.push(day);
day = 1;
}
});
return Math.max.apply(null,continuous);
}
}
return 0;
}
function putDelayMsg( prop : Prop ) {
prop.tag = getUUID();
if (delayMsg.value.has(prop.key)) {
let delayMsgs = delayMsg.value.get(prop.key) as any[];
delayMsgs.push(prop);
delayMsg.value.set(prop.key,delayMsgs);
}else {
let temp = [];
temp.push(prop);
delayMsg.value.set(prop.key,temp);
}
}
onMounted(() => {
cacheStore.value = new Map();
ranking.value = new Map();
delayMsg.value = new Map();
sign.value = new Map();
// 輪詢清除過期的緩存
setInterval(() => {
if(cacheStore.value.size > 0) {
Array.from(cacheStore.value.keys()).forEach( key => {
let data = cacheStore.value.get(key);
if (data) {
let nowDate = new Date().valueOf();
if (data.exp < nowDate && data.exp != -1) {
cacheStore.value.delete(key);
}
}
});
}
},100);
// 發(fā)送過期消息讓Mitt進行通知 emitter.on('xxx', e => { console.log(e) } )
setInterval(() => {
if(delayMsg.value.size > 0) {
Array.from(delayMsg.value.keys()).forEach( key => {
let temp = delayMsg.value.get(key) as any[];
temp.forEach( item => {
let nowDate = new Date().valueOf();
if( item.exp < nowDate - 100 ) {
emitter.emit(item.key, item.data);
temp = temp.filter( dispose => dispose .tag != item.tag);
delayMsg.value.set(item.key,temp);
}
});
})
}
},100);
});
function putRanking( key : string , data : any) {
if(ranking.value.has(key)) {
let rank = ranking.value.get(key) as any[];
let temp = rank.find(item => item.data === data);
if(temp) {
let newVal = rank.filter(item => item.data !== data );
newVal.push({ data: data.toString() , score : temp.score + 1 });
ranking.value.set(key,newVal);
}else {
rank.push({ data: data.toString() , score : 1 });
ranking.value.set(key,rank);
}
}else {
let temp = [] as any[];
temp.push({ data: data.toString() , score: 1 });
ranking.value.set(key,temp);
}
}
function takeRanking( key : string , total : number , desc : boolean): any[] {
let rank = ranking.value.get(key) as any[];
if(desc) {
rank.sort( ( a , b ) => b.score - a.score );
}else {
rank.sort( ( a , b ) => a.score - b.score );
}
return rank.slice(0, total != 1 ? total - 1 : total);
}
// 放入緩存
function putCache( prop : Prop ) {
cacheStore.value.set(prop.key,prop);
}
// 獲取緩存
function takeCache<T>( key : string ) : any {
return cacheStore.value.get(key) as T;
}
// 加鎖
function lock( prop : Prop ) : boolean {
if (getLock(prop.key)) {
return false;
}
cacheStore.value.set(prop.key,prop);
return true;
}
// 獲取鎖
function getLock( key : string ) : boolean {
return cacheStore.value.has(key);
}
// 解鎖
function unLock( key : string , id : any) {
let lock = cacheStore.value.get(key);
if( lock ) {
if( lock.data == id ) {
cacheStore.value.delete(key);
}
}
}
// 全局id
function getUUID () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0
const v = c === 'x' ? r : (r & 0x3 | 0x8)
return v.toString(16)
});
}
return { takeCache , putCache , unLock , lock , getLock , putRanking , takeRanking , getUUID , putDelayMsg , startSign , punchSetting , continuousClocking }
}使用代碼
<template>
<div style="display: flex;justify-content: center;align-items: center;height: 120px;gap: 12px">
<button @click="getCache">獲取緩存</button>
<button @click="getSearch">獲取前三搜索</button>
<button @click="makeOrder">生成訂單</button>
<button @click="initSign">初始打卡數(shù)據(jù)</button>
<button @click="simulationSign">模擬打卡</button>
<button>獲取練習打卡{{continuousClocking('3')}}</button>
</div>
</template>
<style scoped>
@import 'animate.css';
.ske {
display: flex;
justify-content: center;
align-items: center;
animation: hinge;
animation-duration: 3s;
}
</style>
<script setup lang="ts">
import { onMounted } from 'vue';
import emitter from '@/utils/mitt'
import CacheHelp from '@/hooks/CacheHelp'
const { putCache , takeCache , putRanking , takeRanking , putDelayMsg , punchSetting , continuousClocking , startSign } = CacheHelp();
onMounted(() => {
putCache({ key: 'UserInfo' , data : { name: 'Jack' , age : 12 } , exp: new Date().valueOf() + 3000 });
putRanking("word","成都");
putRanking("word","北京");
putRanking("word","成都");
putRanking("word","重慶");
putRanking("word","武漢");
putRanking("word","北京");
putRanking("word","成都");
putRanking("word","上海");
});
function simulationSign() {
startSign('3',2);
startSign('3',3);
startSign('3',4);
startSign('3',12);
startSign('3',13);
startSign('3',14);
startSign('3',15);
startSign('3',16);
startSign('3',18);
startSign('3',31);
}
function getCache() {
console.log(`獲取的緩存：${JSON.stringify(takeCache("UserInfo"))}`);
}
function getMonthDays( year : number, month : number ) : number {
let days = [31,28,31,30,31,30,31,31,30,31,30,31]
if ( ( year % 4 === 0 ) && ( year % 100 !== 0 || year % 400 === 0) ) {
days[1] = 29
}
return days[month - 1];
}
function initSign() {
let signData = []
for (let i = 0; i < getMonthDays(2024,3); i++) {
signData.push(0);
}
punchSetting('3',signData);
}
function getSearch() {
console.log(`排名考前的緩存：${JSON.stringify(takeRanking('word',3,true))}`);
}
function makeOrder() {
console.log(`發(fā)送的時間：${new Date().toLocaleTimeString()}`);
putDelayMsg({ key: 'orderDelay' , data: { price :12.9 , id : 1 , name : '大衣' } , exp : new Date().valueOf() + 10000 });
putDelayMsg({ key: 'orderDelay' , data: { price :15.9 , id : 2 , name : '短袖' } , exp : new Date().valueOf() + 10000 });
}
emitter.on("orderDelay",e => {
console.log(`收到延遲消息：${JSON.stringify(e)}\t接收時間：${new Date().toLocaleTimeString()}`)
})
</script>效果
到此這篇關(guān)于Vue3+Ts實現(xiàn)緩存功能的示例代碼的文章就介紹到這了,更多相關(guān)Vue3 Ts緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.config.js中configureWebpack與chainWebpack區(qū)別及說明
這篇文章主要介紹了vue.config.js中configureWebpack與chainWebpack區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue如何引入全局過濾器問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
avue-crud多級復雜的動態(tài)表頭的實現(xiàn)示例
Avue.js?是基于現(xiàn)有的element-ui庫進行的二次封裝，本文主要介紹了avue-crud多級復雜的動態(tài)表頭，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了vue前端代碼如何通過maven打成jar包運行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了對vue中的input輸入框進行郵箱驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vant的安裝和配合引入Vue.js項目里的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue移動端下拉刷新組件的使用教程，每一次我在使用vant組件庫里面list組件和下拉刷新連在一起用的時候都會出現(xiàn)下拉刷新和列表下滑局部滾動的沖突，這就很難受，這篇文章將解決它2023-04-04
這篇文章主要介紹了VUE 自定義組件模板的方法,結(jié)合實例形式詳細分析了vue.js自定義組件模板的相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-08-08
vue項目在打包時,如何去掉所有的console.log輸出
這篇文章主要介紹了vue項目在打包時,如何去掉所有的console.log輸出，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
npm無法加載文件：因為在此系統(tǒng)上禁止運行腳本的解決辦法
這篇文章主要介紹了npm無法加載文件：因為在此系統(tǒng)上禁止運行腳本問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2025-01-01