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 路径
    })
  ]
相关推荐
安全系统学习32 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669132 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端