文章目录
一、使用浏览器本地存储（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
常见问题
- 1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。
查看详情
相关文章
猜你喜欢
