vuex頁面重新整理導致資料丟失的解決方案
阿新 • • 發佈:2020-12-11
解決vuex頁面重新整理導致資料丟失問題
vuex資料是存在記憶體當中,當頁面重新整理之後vuex資料自然會丟失。我們有兩種方法解決該問題:
1.使用vuex-along
2.使用localStorage或者sessionStroage
1.使用vuex-along
vuex-along的實質也是將vuex中的資料存放到localStorage或者sessionStroage中,只不過這個存取過程這個元件會幫我們完成,我們只需要用vuex的讀取資料方式操作就可以了,簡單瞭解一下vuex-along的使用方法。
安裝vuex-along:
npm install vuex-along --save
配置vuex-along: 在store/index.js 中最後新增以下程式碼:
import VueXAlong from 'vuex-along' //匯入外掛
export default new Vuex.Store({ //modules: { //controler //模組化vuex //},plugins: [VueXAlong({ name: 'store',//存放在localStroage或者sessionStroage 中的名字 local: false,//是否存放在local中 false 不存放 如果存放按照下面session的配置 session: { list: [],isFilter: true } //如果值不為false 那麼可以傳遞物件 其中 當isFilter設定為true時, list 陣列中的值就會被過濾調,這些值不會存放在seesion或者local中 })] });
2.使用localStorage或者sessionStroage
created() { //在頁面載入時讀取sessionStorage裡的狀態資訊 if (sessionStorage.getItem("store")) { this.$store.replaceState( Object.assign( {},this.$store.state,JSON.parse(sessionStorage.getItem("store")) ) ); } //在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡 window.addEventListener("beforeunload",() => { sessionStorage.setItem("store",JSON.stringify(this.$store.state)); }); },
上面兩種方法都可以解決vuex頁面重新整理導致資料丟失問題。按照上面的方法配置之後就可以正常使用vuex了,頁面重新整理資料也不會丟失了。
以上就是vuex頁面重新整理導致資料丟失的解決方案的詳細內容,更多關於vuex 資料丟失的資料請關注我們其它相關文章!