Vue刷新页面数据重置？一招解决Vuex状态丢失

Vue刷新页面数据重置？一招解决Vuex状态丢失

开发Vue项目时，一直被一个小问题困扰：页面跳转正常，只要刷新页面，Vuex里的用户信息、筛选条件就全部清空。

排查后发现不是代码bug，是Vuex的底层机制问题：Vuex数据仅存在内存中，页面刷新会销毁进程，数据直接重置。

分享一个项目实测最简单、最稳妥的解决办法，无需重复请求接口，一步实现状态持久化。

一、安装持久化插件

npm install vuex-persistedstate --save

二、Store核心配置（直接复用）

在 store/index.js 引入并配置，自动将Vuex数据缓存到本地：

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '',
    userInfo: {},
    searchForm: {}
  },
  mutations: {},
  actions: {},
  // 配置持久化
  plugins: [persistedState({ key: 'vuex_cache' })]
})

三、关键避坑（新手必看）

1. 不要全量持久化

列表数据、临时弹窗状态、实时动态数据不要缓存，容易产生脏数据、页面状态错乱。只缓存token、用户信息、全局固定配置即可。

2. 退出登录必须手动清缓存

只清空Vuex state没用，本地缓存会残留旧数据，导致登录状态异常。

// 退出登录清空逻辑
logout() {
  this.$store.commit('resetState')
  localStorage.removeItem('vuex_cache')
  this.$router.replace('/login')
}

四、效果

配置完成后，刷新页面不再丢失状态，无需重复调接口，页面无闪烁，完美适配开发和生产环境。

总结

Vuex本身不支持持久化，这是新手高频踩坑点。用 vuex-persistedstate 是目前最轻量化、零侵入的解决方案，开箱即用，适合所有Vue2常规项目。

日常开发小踩坑，记录一下，希望能帮到有同样问题的朋友。