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
相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作悦悦子a啊2 小时前
Python之--基本知识安全系统学习3 小时前
系统安全之大模型案例分析涛哥码咖3 小时前
chrome安装AXURE插件后无效OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南行云&流水4 小时前
Vue3 Lifecycle HooksSally璐璐4 小时前
零基础学HTML和CSS:网页设计入门老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字烛阴5 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!