解決刷新頁面Vuex數據丟失問題

我們使用 Vue 和 Vuex 的時候，當我們刷新頁面的時候， Vuex 里的數據就會恢復為初始狀態，要想解決這個問題，實現 Vuex 數據的持久化

自己實現

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

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

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

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

使用插件

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。