vue3 store刷新失效场景解决方案

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 .核心代码

javascript 复制代码
 plugins: [
    createPersistedState({
      storage: window.sessionStorage, // 使用 sessionStorage
      paths: ['member'] // 指定要持久化的 state 路径
    })
  ]
相关推荐
我看刑几秒前
【已解决】el-table 前端分页多选、跨页全选等
前端·vue·element
我会一直在的6 分钟前
Fiddler基础使用介绍
前端·测试工具·fiddler
小明记账簿6 分钟前
前端文件流下载方法封装
前端
IT_陈寒9 分钟前
Vite 5大优化技巧:让你的构建速度飙升50%,开发者都在偷偷用!
前端·人工智能·后端
CodeCraft Studio9 分钟前
Vaadin 25 正式发布:回归标准Java Web,让企业级开发更简单、更高效
java·开发语言·前端·vaadin·java web 框架·纯java前端框架·企业级java ui框架
Shirley~~13 分钟前
PPTist 幻灯片工具栏Toolbar部分
开发语言·前端·javascript
|晴 天|14 分钟前
Promise 与 async/await 错误处理最佳实践指南
开发语言·前端·javascript
vx_bisheyuange24 分钟前
基于SpringBoot的便利店信息管理系统
前端·javascript·vue.js·毕业设计
晚烛25 分钟前
智启工厂脉搏:基于 OpenHarmony + Flutter 的信创工业边缘智能平台构建实践
前端·javascript·flutter
Zsnoin能27 分钟前
都快2026了,还有人不会国际化和暗黑主题适配吗,一篇文章彻底解决
前端·javascript