vuex的主要作用是組件之間的通信以及對數(shù)據(jù)進(jìn)行中心化管理。

但是由于vuex中的數(shù)據(jù)是存在運(yùn)行內(nèi)存中的，所以當(dāng)我們刷新頁面的時候會導(dǎo)致store中的數(shù)據(jù)清空。

怎么解決這個問題呢？

我們可以使用傳統(tǒng)的存儲方式將store中的數(shù)據(jù)存起來，比如cookie、localstorage或者sessionstorage，這樣刷新頁面數(shù)據(jù)也不會丟失了。

只是為了保留瀏覽器刷新前的數(shù)據(jù)，所以我們選用sessionstorage，這樣關(guān)閉瀏覽器，存儲的數(shù)據(jù)就會被清空，不會產(chǎn)生重復(fù)數(shù)據(jù)。

具體實現(xiàn)思路是這樣的，我們監(jiān)聽頁面刷新事件，在刷新前將store中的數(shù)據(jù)存儲到sessionstorge中。每次進(jìn)入頁面的時候先讀取sessionstorage中的值并把它賦給store，這樣就保留了刷新前的數(shù)據(jù)。

export default {name: 'App',created () {if (sessionStorage.getItem("store") ) { //頁面加載前讀取sessionStorage里的狀態(tài)信息this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))} window.addEventListener("beforeunload",()=>{ //在頁面刷新前將vuex里的信息保存到sessionStorage里sessionStorage.setItem("store",JSON.stringify(this.$store.state))})} }

?

?

參考鏈接：https://blog.csdn.net/guzhao593/article/details/81435342

轉(zhuǎn)載于:https://www.cnblogs.com/xuweijin/p/10442428.html

總結(jié)

以上是生活随笔為你收集整理的解决浏览器刷新vuex数据丢失问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。