Vuex Store 數(shù)據(jù)在頁面刷新后丟失的解決方法
解決 Vuex Store 數(shù)據(jù)在頁面刷新后丟失的方法
當(dāng)我們使用 Vue.js 和 Vuex 進(jìn)行狀態(tài)管理時，一個常見的問題是頁面刷新會導(dǎo)致 Vuex store 中的數(shù)據(jù)丟失。這是因?yàn)?Vuex store 的數(shù)據(jù)默認(rèn)存儲在內(nèi)存中，頁面刷新會重新加載整個應(yīng)用。本文將詳細(xì)介紹幾種解決方法。
問題原因
Vuex 的設(shè)計初衷是為了管理應(yīng)用的狀態(tài)，它并不會在頁面刷新后自動持久化數(shù)據(jù)。當(dāng)頁面刷新時，瀏覽器會重新加載整個頁面，Vuex store 也會被重新初始化，因此之前存儲在 Vuex 中的數(shù)據(jù)會丟失。
Vuex Persistedstate 插件
Vuex Persistedstate 可以將 Vuex store 中的狀態(tài)持久化到客戶端的存儲中，比如 localStorage、sessionStorage 等。這樣，在用戶刷新頁面或重新打開瀏覽器時，應(yīng)用的狀態(tài)依然可以被保留。
安裝
你可以使用 npm 或 yarn 來安裝 Vuex Persistedstate：
# 使用 npm npm install vuex-persistedstate # 使用 yarn yarn add vuex-persistedstate
基本使用
安裝完插件后，需要在 Vuex store 中引入并使用它。下面是一個基本的使用示例：
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 定義狀態(tài)
},
mutations: {
// 定義突變
},
plugins: [
createPersistedState()
]
});
export default store;在上面的示例中，我們使用了 createPersistedState 函數(shù)，它會自動將 Vuex store 的狀態(tài)保存到 localStorage 中。
配置選項(xiàng)
createPersistedState 函數(shù)接受一個配置對象，你可以根據(jù)需求自定義一些選項(xiàng)。下面是一些常用的配置項(xiàng)：
key
默認(rèn)情況下，Vuex Persistedstate 會將狀態(tài)存儲在 localStorage 中的 vuex 鍵下。你可以通過 key 選項(xiàng)自定義這個鍵名：
createPersistedState({
key: 'my-app-store'
})paths
如果你只想持久化部分狀態(tài)，可以使用 paths 選項(xiàng)來指定要持久化的狀態(tài)路徑：
createPersistedState({
paths: ['moduleA.stateItem1', 'moduleB']
})storage
storage 選項(xiàng)允許你指定使用哪種類型的存儲，默認(rèn)是 localStorage。你可以將其設(shè)置為 sessionStorage 或者自定義的存儲對象：
createPersistedState({
storage: window.sessionStorage
})
// 使用自定義存儲對象
const customStorage = {
getItem: (key) => { /* 獲取項(xiàng)目 */ },
setItem: (key, value) => { /* 設(shè)置項(xiàng)目 */ },
removeItem: (key) => { /* 移除項(xiàng)目 */ }
};
createPersistedState({
storage: customStorage
})getState 和 setState
這兩個選項(xiàng)允許你自定義獲取和設(shè)置狀態(tài)的邏輯：
createPersistedState({
getState: (key, storage) => {
// 自定義獲取邏輯
},
setState: (key, state, storage) => {
// 自定義設(shè)置邏輯
}
})reducer
reducer 選項(xiàng)允許你自定義狀態(tài)的持久化邏輯，通過它你可以只持久化狀態(tài)的一部分?jǐn)?shù)據(jù)：
createPersistedState({
reducer: (state) => {
return {
moduleA: state.moduleA,
moduleB: {
item1: state.moduleB.item1
}
}
}
})filter
filter 選項(xiàng)允許你指定哪些突變會觸發(fā)狀態(tài)的持久化：
createPersistedState({
filter: (mutation) => {
return mutation.type === 'SOME_MUTATION'
}
})完整示例
下面是一個包含多個配置項(xiàng)的完整示例：
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
moduleA: {
stateItem1: 'value1',
stateItem2: 'value2'
},
moduleB: {
item1: 'value3',
item2: 'value4'
}
},
mutations: {
SOME_MUTATION(state, payload) {
// 突變邏輯
}
},
plugins: [
createPersistedState({
key: 'my-app-store',
paths: ['moduleA.stateItem1', 'moduleB'],
storage: window.sessionStorage,
reducer: (state) => {
return {
moduleA: state.moduleA,
moduleB: {
item1: state.moduleB.item1
}
}
},
filter: (mutation) => {
return mutation.type === 'SOME_MUTATION'
}
})
]
});
export default store;簡潔版
const localStorage = ["token","permissions"];
const sessionStorage = ['userInfo'];
export default new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage,
paths: sessionStorage
}), createPersistedState({
storage: window.localStorage,
paths: localStorage
})],
getters,
state,
mutations
})總結(jié)
Vuex Persistedstate 是一個強(qiáng)大且易于使用的插件，能夠幫助我們在 Vue.js 應(yīng)用中持久化 Vuex store 的狀態(tài)。通過靈活的配置項(xiàng)，你可以根據(jù)需求定制狀態(tài)的持久化方式，滿足不同的業(yè)務(wù)場景。
手動持久化數(shù)據(jù)
保存數(shù)據(jù)
如果需要更精細(xì)地控制持久化過程，可以手動將 Vuex store 的數(shù)據(jù)保存到 localStorage 或 sessionStorage 中。在相關(guān)的 mutation 或 action 中實(shí)現(xiàn)數(shù)據(jù)保存邏輯。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
user: JSON.parse(localStorage.getItem('user')) || null,
token: localStorage.getItem('token') || null
},
mutations: {
setUser(state, user) {
state.user = user;
localStorage.setItem('user', JSON.stringify(user));
},
setToken(state, token) {
state.token = token;
localStorage.setItem('token', token);
}
},
actions: {
login({ commit }, { user, token }) {
commit('setUser', user);
commit('setToken', token);
}
}
});
export default store;加載數(shù)據(jù)
在 Vuex store 初始化時，我們可以從 localStorage 或 sessionStorage 中加載數(shù)據(jù)。這樣，當(dāng)應(yīng)用啟動時，數(shù)據(jù)就會被恢復(fù)到 Vuex store 中。
使用 IndexedDB 安裝
localForage
localForage 是一個庫，它為我們提供了對 IndexedDB、WebSQL 和 localStorage 的簡單一致的 API。我們可以使用它來簡化 IndexedDB 的操作。
npm install localforage
配置和使用
在 Vuex store 中引入 localForage 并配置數(shù)據(jù)持久化。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import localforage from 'localforage';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
user: null,
token: null
},
mutations: {
setUser(state, user) {
state.user = user;
localforage.setItem('user', user);
},
setToken(state, token) {
state.token = token;
localforage.setItem('token', token);
}
},
actions: {
login({ commit }, { user, token }) {
commit('setUser', user);
commit('setToken', token);
},
loadUser({ commit }) {
localforage.getItem('user').then(user => {
if (user) {
commit('setUser', user);
}
});
localforage.getItem('token').then(token => {
if (token) {
commit('setToken', token);
}
});
}
}
});
// 應(yīng)用啟動時加載用戶數(shù)據(jù)
store.dispatch('loadUser');
export default store;工作原理
localForage 使用 IndexedDB 作為默認(rèn)的存儲機(jī)制。它提供了與 localStorage 類似的 API，但支持更大的數(shù)據(jù)存儲和更復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。當(dāng)應(yīng)用啟動時，我們可以從 IndexedDB 中加載數(shù)據(jù)并恢復(fù)到 Vuex store 中。
總結(jié)
通過以上方法，我們可以有效地解決 Vuex store 數(shù)據(jù)在頁面刷新后丟失的問題。根據(jù)不同的需求和場景，選擇合適的持久化方案。如果需要快速簡便的解決方案，可以使用 vuex-persistedstate 插件；如果需要更大的存儲空間和更復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，localForage 是一個不錯的選擇。
到此這篇關(guān)于解決 Vuex Store 數(shù)據(jù)在頁面刷新后丟失的方法的文章就介紹到這了,更多相關(guān)Vuex Store 頁面刷新后丟失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個需求,在 Vue3 的一個 H5 頁面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動 tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說可以用 vue-draggable-plus 這個庫來實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了淺談vue的第一個commit分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
element?table?表格控件實(shí)現(xiàn)單選功能
本文主要介紹了element?table?表格控件實(shí)現(xiàn)單選功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
文章介紹了Vue中的v-model實(shí)現(xiàn)原理,包括數(shù)據(jù)監(jiān)聽和UI通知,通過綁定props.modelValue和使用update:modelValue,子組件可以實(shí)現(xiàn)數(shù)據(jù)變更通知父組件,Vue3提供了defineModel來簡化v-model的定義,并支持自定義v-model變量名,感興趣的朋友一起看看吧2025-01-01
今天小編就為大家分享一篇Vue 中對圖片地址進(jìn)行拼接的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
簡單實(shí)現(xiàn)Vue的observer和watcher
這篇文章主要教大家如何簡單實(shí)現(xiàn)Vue的observer和watcher，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了如何修改vuex里面的數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動特效,實(shí)現(xiàn)思路是使用Vue.component定義公共組件，使用window.requestAnimationFrame（首選，次選setTimeout）來循環(huán)數(shù)字動畫，詳細(xì)代碼跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了table表格中使用el-popover 無效問題解決方法,實(shí)例只針對單個的按鈕管用在表格里每一列都有el-popover相當(dāng)于是v-for遍歷了 所以我們在觸發(fā)按鈕的時候并不是單個的觸發(fā)某一個,需要的朋友可以參考下2024-01-01
微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)完整源代碼附效果圖（推薦）
這篇文章主要介紹了微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04