Vuex 数据刷新丢失问题

问题

在 Vue 项目中使用 Vuex 做全局状态管理时，刷新浏览器后 store 中的数据会丢失。

原因是 store 的数据保存在运行内存中，页面刷新时会重新加载 Vue 实例，store 数据被重新初始化。

解答

方案一：使用 vuex-along 插件

vuex-along 会自动将 Vuex 数据存储到 localStorage 或 sessionStorage，无需手动处理存取逻辑。

import VueXAlong from 'vuex-along'

export default new Vuex.Store({
  state: {
    // 你的状态
  },
  mutations: {
    // 你的 mutations
  },
  plugins: [VueXAlong()]
})

方案二：手动使用 localStorage/sessionStorage

在 App.vue 中监听页面加载和刷新事件，手动保存和恢复状态。

export default {
  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-along 插件可以自动持久化状态，使用简单
• 手动方案需要在页面加载时恢复状态，刷新前保存状态
• localStorage 数据永久保存，sessionStorage 关闭标签页后清除
• 使用 replaceState 方法可以替换整个 store 状态