? ? ? vuex是大家使用vue時大多數(shù)都會選擇的，但是當(dāng)頁面刷新之后vuex數(shù)據(jù)會丟失，因為頁面刷新之后代碼重新加載這樣vuex的數(shù)據(jù)自然就會為空。怎么解決這個問題呢？vuex自身好像沒有太好的解決方案,但是我們可以利用localStorage和sessionStorage對數(shù)據(jù)進(jìn)行保存。這樣這個問題就解決了。這個方法比較簡單但是其實這樣做就和vuex沒有太大的關(guān)系了，我們可以將數(shù)據(jù)存在localStorage中為什么還要用vuex呢？所以這種方法可用但是不建議,那么還有什么解決方案呢？ 其實網(wǎng)上也有很多解決這個問題的三方組件,例如 vuex-along。

　　vuex-along的實質(zhì)也是將vuex中的數(shù)據(jù)存放到localStorage或者sessionStroage中，只不過這個存取過程這個組件會幫我們完成,我們只需要用vuex的讀取數(shù)據(jù)方式操作就可以了,簡單了解一下vuex-along的使用方法。

　　安裝vuex-along:?

npm install vuex-along --save

　　配置vuex-along: 在store/index.js 中最后添加以下代碼:

import VueXAlong from 'vuex-along' plugins: [VueXAlong({name: 'along', //存放在localStroage或者sessionStroage 中的名字local: false, //是否存放在local中 false 不存放 如果存放按照下面session的配置配session: { list: [], isFilter: true } //如果值不為false 那么可以傳遞對象 其中 當(dāng)isFilter設(shè)置為true時， list 數(shù)組中的值就會被過濾調(diào),這些值不會存放在seesion或者local中})]

　　上面配置之后就可以正常使用vuex了，頁面刷新數(shù)據(jù)也不會丟失了。

　　當(dāng)然這種問題的解決方案很多,但是大多數(shù)都要借助seesion或local的幫助，如果不使用組件的化,可以在頁面刷新之前將vuex的數(shù)據(jù)存放在seesion或local中, 刷新事件(beforeunload) 。

?

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

總結(jié)

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

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