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
相关推荐
祝余呀几秒前
HTML初学者第三天就爱瞎逛17 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效柚子81620 分钟前
sibling-index:我用这个画时钟表盘UI设计和前端开发从业者34 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算前端小巷子1 小时前
Web开发中的文件上传翻滚吧键盘2 小时前
{{ }}和v-on:click上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程杨进军2 小时前
React 创建根节点 createRootModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序说码解字3 小时前
Kotlin lazy 委托的底层实现原理