Vuex 数据在刷新页面后丢失问题的优雅解决方案：replaceState 和 sessionStorage

2023-12-03 18:00:39

在 Vue.js 应用程序中，Vuex 是一个状态管理工具，用于集中管理应用程序的状态。然而，当页面刷新时，Vuex 中的数据可能会丢失。为了解决这个问题，我们可以利用 replaceState 和 sessionStorage 来实现数据的持久化。

replaceState 可以将当前页面的状态压入浏览器的历史记录栈，而不会触发页面重新加载。sessionStorage 则是一个存储空间，允许我们在浏览器会话期间存储数据，即使页面刷新也不会丢失。

以下是如何利用 replaceState 和 sessionStorage 解决 Vuex 数据丢失问题的步骤：

在 Vuex 中创建一个持久化存储模块，用于存储需要持久化的数据。
使用 replaceState 将当前页面的状态压入历史记录栈，并将持久化存储模块中的数据存储到 sessionStorage 中。
在页面加载时，从 sessionStorage 中获取持久化存储模块的数据，并将其还原到 Vuex 中。

通过这些步骤，我们可以确保 Vuex 中的数据在页面刷新后依然保持完整和可用。

代码示例

// Vuex 持久化存储模块
const persistedState = {
  namespaced: true,
  state: {
    // 需要持久化的数据
  },
  mutations: {
    // 持久化数据
    save(state) {
      sessionStorage.setItem('vuex-persisted-state', JSON.stringify(state))
    }
  }
}

// 在 Vuex 实例中注册持久化存储模块
const store = new Vuex.Store({
  modules: {
    persistedState
  }
})

// 页面刷新时将 Vuex 状态存储到 sessionStorage 中
window.addEventListener('pagehide', () => {
  store.commit('persistedState/save')
})

// 页面加载时从 sessionStorage 中还原 Vuex 状态
window.addEventListener('load', () => {
  const state = JSON.parse(sessionStorage.getItem('vuex-persisted-state'))
  if (state) {
    store.commit('persistedState/restore', state)
  }
})