Vuex頁面刷新數(shù)據(jù)不丟失的幾種解決方案
更新時間：2025年07月23日 09:12:27 作者：江城開朗的豌豆
相信很多用Vuex做狀態(tài)管理的同學(xué)都遇到過這個問題——明明登錄成功了,一刷新頁面又跳回登錄頁；購物車?yán)锏纳唐?刷新后全空了,今天我就來分享幾種解決方案,幫你徹底搞定這個煩人的問題
大家好。今天想和大家聊聊一個Vue項目中經(jīng)常遇到的坑：用Vuex存儲的數(shù)據(jù)，一刷新頁面就沒了！
相信很多用Vuex做狀態(tài)管理的同學(xué)都遇到過這個問題——明明登錄成功了，一刷新頁面又跳回登錄頁；購物車?yán)锏纳唐?，刷新后全空了。今天我就來分享幾種解決方案，幫你徹底搞定這個煩人的問題。
一、為什么Vuex數(shù)據(jù)會丟失？
先搞清楚原理：Vuex的數(shù)據(jù)是存在內(nèi)存中的。這就意味著：
- 頁面刷新 → 瀏覽器重新加載 → JavaScript內(nèi)存重置 → Vuex數(shù)據(jù)清空
所以要想持久化數(shù)據(jù)，我們必須把數(shù)據(jù)存到“不會輕易丟失”的地方。常見的有三種方案：
二、解決方案1：localStorage/sessionStorage（簡單粗暴）
這是最直接的方案，在Vuex數(shù)據(jù)變化時同步到Storage：
// store/index.js
const store = new Vuex.Store({
state: {
userInfo: JSON.parse(localStorage.getItem('userInfo')) || null
},
mutations: {
setUserInfo(state, payload) {
state.userInfo = payload
localStorage.setItem('userInfo', JSON.stringify(payload)) // 同步存儲
},
clearUserInfo(state) {
state.userInfo = null
localStorage.removeItem('userInfo') // 清除存儲
}
}
})
// 使用示例
methods: {
login() {
const myData = { name: '小楊', token: 'abc123' }
this.$store.commit('setUserInfo', myData)
}
}
優(yōu)點：
- 實現(xiàn)簡單，無需額外庫
- 數(shù)據(jù)真·持久化（除非用戶手動清除）
缺點：
- 需要手動同步，容易遺漏
- 存儲大小有限（通常5MB）
三、解決方案2：vuex-persistedstate（優(yōu)雅推薦）
如果你不想自己寫存儲邏輯，可以用這個現(xiàn)成插件：
npm install vuex-persistedstate
// store/index.js
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [
createPersistedState({
key: 'my-vuex-storage', // 存儲的key名
paths: ['userInfo', 'cart'], // 只持久化指定模塊
storage: window.sessionStorage // 改用sessionStorage
})
]
})
插件原理：
- 在Vuex初始化時從storage讀取數(shù)據(jù)
- 訂閱mutation，數(shù)據(jù)變化時自動更新storage
進(jìn)階配置：
createPersistedState({
storage: {
getItem: key => uni.getStorageSync(key), // 小程序兼容方案
setItem: (key, value) => uni.setStorageSync(key, value),
removeItem: key => uni.removeStorageSync(key)
}
})
四、解決方案3：Cookie（適合配合SSR）
如果需要和后端交互（比如自動帶token），可以用Cookie存儲：
import Cookies from 'js-cookie'
const store = new Vuex.Store({
state: {
token: Cookies.get('token') || null
},
mutations: {
setToken(state, token) {
state.token = token
Cookies.set('token', token, { expires: 7 }) // 7天后過期
}
}
})
Cookie vs localStorage：
| 特性 | Cookie | localStorage |
|---|---|---|
| 容量 | 4KB左右 | 5MB左右 |
| 是否隨請求發(fā)送 | 是（需注意安全） | 否 |
| 服務(wù)端是否可讀 | 是 | 否 |
五、性能與安全注意事項
不要什么數(shù)據(jù)都存：只存必要數(shù)據(jù)（如用戶token、基礎(chǔ)信息）
敏感信息處理：
// 錯誤示范！存了密碼明文
localStorage.setItem('password', '123456')
// 正確做法：只存token
localStorage.setItem('token', '加密后的字符串')
定期清理：設(shè)置合理的過期時間
大對象慎存：可能影響頁面加載性能
六、終極方案：組合拳
在我的實際項目中，通常會這樣搭配使用：
- 用戶token → Cookie存儲（方便SSR和HTTP自動攜帶）
- 用戶基礎(chǔ)信息 → localStorage + Vuex（減少接口請求）
- 臨時數(shù)據(jù) → 純Vuex（如表單填寫狀態(tài)）
七、總結(jié)
| 方案 | 適用場景 | 一句話評價 |
|---|---|---|
| localStorage | 需要長期存儲的簡單數(shù)據(jù) | 簡單但需手動同步 |
| vuex-persistedstate | 需要自動同步的復(fù)雜狀態(tài) | 優(yōu)雅但需引入額外依賴 |
| Cookie | 需要服務(wù)端讀取或SSR項目 | 注意安全性和容量限制 |
最后提醒大家：前端存儲永遠(yuǎn)不可信！ 所有關(guān)鍵權(quán)限校驗必須走后端接口。
寫在最后?
到此這篇關(guān)于Vuex頁面刷新不丟失的幾種解決方案的文章就介紹到這了,更多相關(guān)Vuex頁面刷新不丟失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-router的兩種模式的區(qū)別，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結(jié)合實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
在Vue中使用xlsx組件實現(xiàn)Excel導(dǎo)出功能的步驟詳解
在現(xiàn)代Web應(yīng)用程序中,數(shù)據(jù)導(dǎo)出到Excel格式是一項常見的需求,Vue.js是一種流行的JavaScript框架,允許我們構(gòu)建動態(tài)的前端應(yīng)用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實現(xiàn)Excel數(shù)據(jù)導(dǎo)出功能,需要的朋友可以參考下2023-10-10
Vue?3.0?v-for中的Ref數(shù)組用法小結(jié)
在?Vue?2?中,在?v-for?里使用的?ref?attribute會用ref?數(shù)組填充相應(yīng)的?$refs?property,本文給大家介紹Vue?3.0?v-for中的Ref數(shù)組的相關(guān)知識,感興趣的朋友一起看看吧2023-12-12
vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)
本文主要介紹了vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
基于el-table實現(xiàn)行內(nèi)增刪改功能
這篇文章主要介紹了基于el-table實現(xiàn)行內(nèi)增刪改功能,用過通過操作按鈕點擊刪除或者編輯功能即可實現(xiàn)相應(yīng)的效果,下面小編給大家分享實例代碼感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要為大家詳細(xì)解析了Vue監(jiān)聽數(shù)組變化的源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
在JS編程中如果能監(jiān)測變量的內(nèi)容,當(dāng)變量值發(fā)生變化時,實時發(fā)出通知,這定是一項很有用的功能,下面這篇文章主要給大家介紹了關(guān)于如何使用JS監(jiān)聽一個變量改變的相關(guān)資料,需要的朋友可以參考下2023-05-05
Vue是一個以數(shù)據(jù)驅(qū)動、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實時更新的解決方法,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了如何利用vue實現(xiàn)密碼輸入框或驗證碼輸入框的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08