1. 安装 vuex-persistedstate 插件
vuex-persistedstate 是一个常用的插件,可以方便地将 Vuex 状态持久化到 localStorage 或 sessionStorage 中
npm install vuex-persistedstate
2. 配置 Vuex Store 使用 sessionStorage
javascript// store/index.js import { createStore } from 'vuex'; import createPersistedState from 'vuex-persistedstate'; export default createStore({ state: { member: {} }, mutations: { SET_MEMBER(state, payload) { state.member = payload; } }, actions: { fetchMember({ commit }) { // 模拟异步获取用户信息 setTimeout(() => { commit('SET_MEMBER', { name: 'John Doe', id: 1 }); }, 1000); } }, plugins: [ createPersistedState({ storage: window.sessionStorage, // 使用 sessionStorage paths: ['member'] // 指定要持久化的 state 路径 }) ] });
3 .核心代码
javascriptplugins: [ createPersistedState({ storage: window.sessionStorage, // 使用 sessionStorage paths: ['member'] // 指定要持久化的 state 路径 }) ]
vue3 store刷新失效场景解决方案
小汤猿人类2025-02-05 15:30
相关推荐
河畔一角6 分钟前
一些感悟excel12 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别前端小巷子41 分钟前
Webpack 5模块联邦玲小珑44 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧晓得迷路了1 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...江城开朗的豌豆1 小时前
Vue和React中的key:为什么列表渲染必须加这玩意儿?江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!pengzhuofan1 小时前
Web开发系列-第0章 Web介绍小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙JosieBook3 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?