解决页面刷新后 Vuex 状态丢失的完整方案

文章目录
一、使用浏览器本地存储（localStorage/sessionStorage）
1.1 基础实现方案
1.2 自动持久化方案
二、使用 vuex-persistedstate 插件
2.1 基本使用
2.2 高级配置
三、使用 IndexedDB 存储大量数据
3.1 使用 localForage 库
3.2 自定义 IndexedDB 实现
四、服务端持久化方案
4.1 在 actions 中实现同步
4.2 页面加载时初始化
五、综合解决方案
六、安全注意事项
七、Nuxt.js 中的特殊处理
总结
当页面刷新时，Vuex 的 state 数据会丢失，这是因为 Vuex 的状态存储在内存中，刷新浏览器会重置 JavaScript 的运行环境。下面我将详细介绍几种解决方案，从简单到复杂，帮助你根据项目需求选择最适合的方法。
一、使用浏览器本地存储（localStorage/sessionStorage）
1.1 基础实现方案
原理：在 state 变化时将数据存入 localStorage，初始化时读取
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    // 从 localStorage 初始化状态
    user: JSON.parse(localStorage.getItem('user') || null,
    settings: JSON.parse(localStorage.getItem('settings')) || {}
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      // 状态变化时保存到 localStorage
      localStorage.setItem('user', JSON.stringify(user))
    },
    updateSettings(state, settings) {
      state.settings = settings
      localStorage.setItem('settings', JSON.stringify(settings))
    }
  }
})
export default store
优点：
实现简单直接
不需要额外依赖
缺点：
需要手动管理每个状态的持久化
代码重复度高
1.2 自动持久化方案
通过 Vuex 的插件机制自动保存所有状态：
const localStoragePlugin = store => {
  // 初始化时从 localStorage 恢复状态
  if (localStorage.getItem('vuex')) {
    store.replaceState(
      Object.assign({}, store.state, JSON.parse(localStorage.getItem('vuex')))
    )
  }  
  // 订阅 store 变化
  store.subscribe((mutation, state) => {
    // 每次 mutation 后保存整个状态
    localStorage.setItem('vuex', JSON.stringify(state))
  })
}
const store = new Vuex.Store({
  // ...state, mutations, actions 等
  plugins: [localStoragePlugin]
})
优化点：
可以只持久化特定模块的状态
添加防抖避免频繁写入
const persistState = debounce((state) => {
  const persistData = {
    auth: state.auth,  // 只持久化 auth 模块
    user: state.user   // 和 user 状态
  }
  localStorage.setItem('vuex', JSON.stringify(persistData))
}, 1000)
二、使用 vuex-persistedstate 插件
2.1 基本使用
这是一个专门为 Vuex 设计的持久化插件：
npm install vuex-persistedstate
# 或
yarn add vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState()
  ]
})
2.2 高级配置
createPersistedState({
  key: 'my-vuex-storage',       // 存储键名，默认是 'vuex'
  storage: window.sessionStorage, // 可替换为 sessionStorage
  paths: [                     // 指定要持久化的状态路径
    'user',
    'settings.theme'
  ],
  reducer: (state) => {        // 自定义过滤函数
    return {
      auth: state.auth,
      project: state.project.currentProject
    }
  }
})
插件特点：
支持多种存储方式（localStorage, sessionStorage, cookies）
可以指定持久化的状态路径
支持自定义序列化方法
默认使用防抖优化性能
三、使用 IndexedDB 存储大量数据
当需要存储大量数据时，localStorage 的容量限制（通常 5MB）可能不够，可以使用 IndexedDB：
3.1 使用 localForage 库
npm install localforage
import localforage from 'localforage'
import { extendPrototype } from 'localforage-vuex'
// 扩展 Vuex.Store
extendPrototype(Vuex.Store)
const store = new Vuex.Store({
  // ...
  plugins: [
    localforage.createStore({
      driver: localforage.INDEXEDDB,
      name: 'my-app',
      storeName: 'vuex_persist'
    })
  ]
})
3.2 自定义 IndexedDB 实现
function indexedDBPlugin() {
  return store => {
    const request = indexedDB.open('vuex-store', 1)    
    request.onupgradeneeded = event => {
      const db = event.target.result
      if (!db.objectStoreNames.contains('state')) {
        db.createObjectStore('state')
      }
    }    
    request.onsuccess = event => {
      const db = event.target.result
      const transaction = db.transaction('state', 'readonly')
      const objectStore = transaction.objectStore('state')
      const getRequest = objectStore.get('state')      
      getRequest.onsuccess = () => {
        if (getRequest.result) {
          store.replaceState(getRequest.result)
        }
      }      
      store.subscribe((mutation, state) => {
        const putTransaction = db.transaction('state', 'readwrite')
        putTransaction.objectStore('state').put(state, 'state')
      })
    }
  }
}
四、服务端持久化方案
对于需要长期保存的用户数据，应该同步到服务器：
4.1 在 actions 中实现同步
actions: {
  updateProfile({ commit }, profile) {
    return api.updateProfile(profile)
      .then(updatedProfile => {
        commit('SET_PROFILE', updatedProfile)
        return updatedProfile
      })
  },
  async loadInitialData({ commit }) {
    try {
      const [user, settings] = await Promise.all([
        api.getUser(),
        api.getSettings()
      ])
      commit('SET_USER', user)
      commit('SET_SETTINGS', settings)
    } catch (error) {
      console.error('Failed to load initial data:', error)
    }
  }
}
4.2 页面加载时初始化
在 App.vue 或根组件中：
export default {
  created() {
    // 从服务器加载初始数据
    this.$store.dispatch('loadInitialData')
  }
}
五、综合解决方案
一个完整的持久化策略通常包含以下层次：
短期存储：使用 sessionStorage 保存会话期间的状态
长期存储：使用 localStorage 或 IndexedDB 保存用户偏好
关键数据：同步到服务器确保数据安全
import createPersistedState from 'vuex-persistedstate'
import localforage from 'localforage'
// 不同存储策略
const sessionPersist = createPersistedState({
  storage: window.sessionStorage,
  paths: ['auth.token']  // 会话 token 使用 sessionStorage
})
const localPersist = createPersistedState({
  paths: ['user.preferences']  // 用户偏好使用 localStorage
})
const dbPersist = {
  async getItem(key) {
    return (await localforage.getItem(key)) || null
  },
  async setItem(key, value) {
    await localforage.setItem(key, value)
  },
  async removeItem(key) {
    await localforage.removeItem(key)
  }
}
const foragePersist = createPersistedState({
  storage: dbPersist,
  paths: ['projects']  // 大型数据使用 IndexedDB
})
const store = new Vuex.Store({
  // ...
  plugins: [sessionPersist, localPersist, foragePersist]
})
六、安全注意事项
敏感信息：不要存储敏感数据（如密码、token）在客户端
加密存储：对重要数据进行加密
数据验证：从存储加载时要验证数据格式
存储限制：注意 localStorage 的大小限制（通常 5MB）
import CryptoJS from 'crypto-js'
const SECRET_KEY = 'your-secret-key'
const secureStorage = {
  getItem(key) {
    const encrypted = localStorage.getItem(key)
    if (!encrypted) return null
    const bytes = CryptoJS.AES.decrypt(encrypted, SECRET_KEY)
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8))
  },
  setItem(key, value) {
    const encrypted = CryptoJS.AES.encrypt(
      JSON.stringify(value), 
      SECRET_KEY
    ).toString()
    localStorage.setItem(key, encrypted)
  }
}
七、Nuxt.js 中的特殊处理
在 Nuxt.js 中使用 Vuex 时，由于服务端渲染的特性，需要特别注意：
// store/index.js
export const actions = {
  nuxtServerInit({ commit }, { req }) {
    // 从 cookie 初始化状态
    if (req.headers.cookie) {
      const cookies = cookie.parse(req.headers.cookie)
      if (cookies.token) {
        commit('auth/SET_TOKEN', cookies.token)
      }
    }
  }
}
配合 js-cookie 在客户端管理：
import Cookies from 'js-cookie'
const cookiePlugin = store => {
  store.subscribe((mutation, state) => {
    if (mutation.type === 'auth/SET_TOKEN') {
      Cookies.set('token', state.auth.token, { expires: 7 })
    }
  })
}
总结
根据项目需求，可以选择以下方案：
方案 适用场景 优点 缺点
localStorage 简单应用、小数据量 简单易用 有大小限制、不安全
vuex-persistedstate 大多数 Vuex 项目 配置灵活、功能完善 需要额外依赖
IndexedDB/localForage 大数据量、复杂应用 存储容量大 实现较复杂
服务端同步 关键用户数据 数据安全可靠 需要网络请求
最佳实践建议：
小型应用使用 vuex-persistedstate + localStorage
中大型应用组合使用 sessionStorage（会话数据）、IndexedDB（应用数据）和服务端存储（用户数据）
敏感信息应该加密存储或避免存储在客户端
注意清理过期的存储数据，避免占用过多空间
通过合理组合这些技术，可以有效解决 Vuex 状态在页面刷新后丢失的问题，同时保证应用的性能和安全性。
                        
原文链接：https://blog.csdn.net/qq_16242613/article/details/147021426