解決刷新頁面Vuex數(shù)據(jù)丟失問題

我們使用 Vue 和 Vuex 的時候，當(dāng)我們刷新頁面的時候， Vuex 里的數(shù)據(jù)就會恢復(fù)為初始狀態(tài)，要想解決這個問題，實現(xiàn) Vuex 數(shù)據(jù)的持久化

自己實現(xiàn)

• 我們可以在刷新頁面之前將數(shù)據(jù)存儲到 sessionStorage 、 localStorage、cookie 里面，然后我們進(jìn)入頁面之前從 sessionStorage 、 localStorage 、 cookie 里面讀取數(shù)據(jù)保存到 Vuex 里即可，具體的代碼如下：

• ,如果用戶退出瀏覽器，則 sessionStorage 里面的數(shù)據(jù)就消失了，而 localStorage 里的數(shù)據(jù)除非你自己手動清除，否則一直存在，而 cookie 一般是有時效性的，而且 cookie 里面可以存儲的數(shù)據(jù)大小有限，最多只能儲存 4KB 的數(shù)據(jù)

• 個人建議儲存在 sessionStorage 里面會更好

// APP.vueexport default {name: 'App',created() {const oldStore = sessionStorage.getItem('store')// 第一次進(jìn)入頁面時為null，后面如果刷新頁面將會有值，則會替換Vuex里面的數(shù)據(jù)if (oldStore !== null) {this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(oldStore)))}// 監(jiān)聽頁面刷新，將store里面的數(shù)據(jù)保存到sessionStoragewindow.addEventListener('beforeunload', () => {sessionStorage.setItem('store', JSON.stringify(this.$store.state))})}, }

使用插件

你可以使用 vuex-persistedstate 這個插件，本質(zhì)的原理也是使用了本地的儲存，也可以分別存儲在 cookie , sessionStorage , localStorage 里面

總結(jié)

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

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