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 路径
    })
  ]
相关推荐
河畔一角6 分钟前
一些感悟
前端
excel12 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子41 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑44 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了1 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆1 小时前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook3 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug