vuex存儲數(shù)組(新建，增，刪，更新)并存入localstorage定時(shí)刪除功能實(shí)現(xiàn)
更新時(shí)間：2023年04月29日 10:07:20 作者：anjushi_
這篇文章主要介紹了vuex存儲數(shù)組(新建，增，刪，更新)，并存入localstorage定時(shí)刪除,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
vuex存儲數(shù)組(新建，增，刪，更新)，并存入localstorage定時(shí)刪除
使用背景
初始化一個(gè)完整數(shù)組，但在業(yè)務(wù)邏輯中會單獨(dú)更新或增刪其中的一部分或全部。
如果每次都是全部更新，直接使用set替換即可，但大部分?jǐn)?shù)組不變只修改個(gè)別數(shù)據(jù)，直接替換的代價(jià)較大，因此維護(hù)一個(gè)增刪改的業(yè)務(wù)。
原來的數(shù)據(jù)都是有意義的，新數(shù)據(jù)可能是初始化的，不能直接替換成新數(shù)據(jù)，新數(shù)據(jù)可能只是增刪了id，但是其他數(shù)據(jù)內(nèi)容還要繼續(xù)使用舊數(shù)據(jù)的，所以只能在舊數(shù)據(jù)基礎(chǔ)上進(jìn)行維護(hù)
store中實(shí)現(xiàn)增刪改
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
list: [],
},
getters: {},
mutations: {
setList(state, list) {
state.list = list;
},
addItem(state, item) {
state.list.push(item);
},
updateItem(state, payload) {
Vue.set(state.list, payload.index, payload.data);
},
deleteItem(state, lt) {
let newIds = lt.map((item) => item.aid);
state.list = state.list.filter((item) => newIds.includes(item.aid));
},
},
actions: {}
})
export default store;組件中維護(hù)數(shù)組，進(jìn)行判斷
對象數(shù)組數(shù)據(jù)格式
[
{ "aid": "1", "aname": "111", "tobid": "1" }
{ "aid": "2", "aname": "ddd", "tobid": "2" }
]組件中判斷
- 新建的時(shí)候進(jìn)行判斷that.list.length == 0 || that.list == null，直接set賦值即可
- 如果不為0，說明已經(jīng)初始化并賦值，遍歷當(dāng)前數(shù)組（本文中數(shù)據(jù)來自后端）
- id不存在（舊數(shù)組沒有而新數(shù)組有），則調(diào)用add添加
- id存在需要判斷這個(gè)對象是否完全相同，不完全相同則調(diào)用update
- 最后調(diào)用delete，store中直接使用filter過濾掉新數(shù)組中有而舊數(shù)組沒有的對象（delete的邏輯可以單獨(dú)存在，不與更新一起）
自行修改使用：大更新需要add和delete，局部更新只有update
例如舊數(shù)組是【1，2】，新數(shù)組是【2，3】，經(jīng)過第二步之后，舊數(shù)據(jù)變?yōu)椤?，2，3】，但【1】是需要?jiǎng)h除的
<template>
<div class="form-all">
<el-button @click="getList()">getList</el-button>
<el-button @click="clearStorage()">clear Local Storage</el-button>
<div v-for="(item) in list" :key="item.aid">{{ item }}</div>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
name: "demo",
data() {
return {
lit: [],
};
},
components: {},
computed: {
...mapState(["list"]),
},
methods: {
...mapMutations(["setList", "addItem", "updateItem", "deleteItem"]),
clearStorage() {
// localStorage.setItem("list", []);
localStorage.removeItem('list');
},
getList() {
console.log(this.list.length);
let that = this;
this.axios
.get('/abc/onetooneAnnote')
.then((response) => {
//返回結(jié)果
let lt = response.data;
this.setStore(lt);
})
.catch((error) => {
console.log(error)
})
},
setStore(lt) {
let that = this;
if (that.list.length == 0) {
//初始化
this.setList(lt);
} else {
let lit = that.list;
lt.forEach((newItem, i) => {
const index = lit.findIndex((litem) => litem.aid === newItem.aid);
if (index == -1) {
// 添加
this.addItem(newItem);
} else {
const oldItem = lit[index];
if (JSON.stringify(oldItem) != JSON.stringify(newItem)) {
// 更新
let payload = {
data: newItem,
index: index,
}
this.updateItem(payload);
}
}
})
//刪除
this.deleteItem(lt);
}
},
},
mounted() {
},
created() {},
destroyed() {},
watch: {},
}
</script>
<style scoped>
</style>
<style></style>存入localstorage并設(shè)置定時(shí)刪除
不刷新頁面，使用的vuex內(nèi)的值，刷新頁面才會重新從localstorage中獲取
自定義實(shí)現(xiàn)
- 使用
subscribe監(jiān)聽指定的mutation方法，對應(yīng)方法調(diào)用則更新localstorage - 實(shí)現(xiàn)函數(shù)
setItemWithExpiry，將時(shí)間作為變量和數(shù)據(jù)整編成一個(gè)對象，存入localStorage，在subscribe時(shí)調(diào)用此函數(shù)
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
// 將數(shù)據(jù)存儲到LocalStorage并設(shè)置過期時(shí)間（毫秒）
function setItemWithExpiry(key, value, ttl) {
const item = {
value: value,
expiry: new Date().getTime() + ttl,
};
localStorage.setItem(key, JSON.stringify(item));
}
const store = new Vuex.Store({
state: {
list: JSON.parse(localStorage.getItem("list")).value || [],
},
getters: {},
mutations: {
setList(state, list) {
state.list = list;
},
addItem(state, item) {
state.list.push(item);
},
updateItem(state, payload) {
Vue.set(state.list, payload.index, payload.data);
},
deleteItem(state, lt) {
let newIds = lt.map((item) => item.aid);
state.list = state.list.filter((item) => newIds.includes(item.aid));
},
},
actions: {}
})
// 監(jiān)聽訂閱
store.subscribe((mutation, state) => {
if (['setList', 'addItem', 'updateItem', 'deleteItem'].includes(mutation.type)) {
// 不設(shè)置定時(shí)刪除
// localStorage.setItem('list', JSON.stringify(state.list));
// 使用定時(shí)刪除
setItemWithExpiry("list", state.list, 10 * 1000);
}
});
export default store;其中獲取vuex的值，如果每次都想直接從localstorage中讀取，可以使用store的getters屬性
getters: {
getList: (state) => {
return state.list;
},
},組件中使用
<div v-for="(item) in getList" :key="item.aid">{{ item }}</div>
import { mapGetters } from "vuex";
computed: {
...mapGetters(['getList']),
},使用storage-timing插件
官方github地址：https://github.com/xxwwp/StorageTiming/blob/main/docs/zh.md
調(diào)用定時(shí)刪除
- 設(shè)置定時(shí)器，可以在
App.vue中全局設(shè)置 checkExpiry可以遍歷全部localstorage，也可以只關(guān)注某幾個(gè)變量
<template>
...
</template>
<script>
export default {
data() {
return {
timer: "",
}
},
components: {},
methods: {
getItemWithExpiry(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) {
return null;
}
const item = JSON.parse(itemStr);
const currentTime = new Date().getTime();
if (currentTime > item.expiry) {
// 如果數(shù)據(jù)已經(jīng)過期，刪除它
localStorage.removeItem(key);
return null;
}
return item.value;
},
// 檢查LocalStorage中的數(shù)據(jù)是否過期
checkExpiry() {
this.getItemWithExpiry("list");
// for (let i = 0; i < localStorage.length; i++) {
// const key = localStorage.key(i);
// getItemWithExpiry(key);
// }
},
startCheck(){
let that = this;
this.timer = setInterval(() => { //開啟定時(shí)器
console.log("check localstorage");
that.checkExpiry()
}, 1000)
}
},
mounted() {
this.startCheck();
},
beforeDestroy(){
clearInterval(this.timer)//組件銷毀之前清掉timer
},
computed: {},
created() {
},
}
</script>
<style scoped></style>
<style></style>最終效果
初始化
新增
更新和刪除
谷歌瀏覽器查看localstorage（F12 --> Application -->Storage）
localstorage定時(shí)刪除
到此這篇關(guān)于vuex存儲數(shù)組(新建，增，刪，更新)，并存入localstorage定時(shí)刪除的文章就介紹到這了,更多相關(guān)vuex存儲數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在 Vue 中，如果直接對數(shù)組進(jìn)行操作，比如使用下標(biāo)直接修改元素，數(shù)組長度不變時(shí)， Vue 是無法監(jiān)測到這種變化的，導(dǎo)致無法觸發(fā)視圖更新。針對該問題本文為大家整理了一些方法，需要的可以參考一下2023-01-01
在vue項(xiàng)目中promise解決回調(diào)地獄和并發(fā)請求的問題
這篇文章主要介紹了在vue項(xiàng)目中promise解決回調(diào)地獄和并發(fā)請求的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue按時(shí)間段查詢數(shù)據(jù)組件使用詳解
這篇文章主要為大家詳細(xì)介紹了Vue按時(shí)間段查詢數(shù)據(jù)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對應(yīng)id方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章手把手教你搭建vue3.0項(xiàng)目架構(gòu)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-11-11
詳解element-ui動態(tài)限定的日期范圍選擇器代碼片段
這篇文章主要介紹了element-ui動態(tài)限定的日期范圍選擇器代碼片段，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue.js 如何添加全局常量或變量? 這是最近一個(gè)同事問的問題，發(fā)現(xiàn)很多朋友對這塊不熟悉，所以下面這篇文章主要給大家介紹了關(guān)于Vue中定義全局變量與常量的各種方式，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue-router next(false) 禁止訪問某個(gè)頁面時(shí),不保留歷史訪問記錄問題
這篇文章主要介紹了vue-router next(false) 禁止訪問某個(gè)頁面時(shí),不保留歷史訪問記錄問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了如何讓別人訪問本地運(yùn)行的vue項(xiàng)目，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10