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

server/2025/2/5 16:51:40/

1. 安装 vuex-persistedstate 插件

vuex-persistedstate 是一个常用的插件,可以方便地将 Vuex 状态持久化到 localStorage 或 sessionStorage 中

npm install vuex-persistedstate

2. 配置 Vuex Store 使用 sessionStorage

// 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, // 使用 sessionStoragepaths: ['member'] // 指定要持久化的 state 路径})]
});

3 .核心代码

 plugins: [createPersistedState({storage: window.sessionStorage, // 使用 sessionStoragepaths: ['member'] // 指定要持久化的 state 路径})]


http://www.ppmy.cn/server/165187.html

相关文章

文件读写操作

写入文本文件 #include <iostream> #include <fstream>//ofstream类需要包含的头文件 using namespace std;void test01() {//1、包含头文件 fstream//2、创建流对象ofstream fout;/*3、指定打开方式&#xff1a;1.ios::out、ios::trunc 清除文件内容后打开2.ios:…

机器学习常用包numpy篇(四)函数运算

目录 前言 一、三角函数 二、双曲函数 三、数值修约 四、 求和、求积与差分 五、 指数与对数 六、算术运算 七、 矩阵与向量运算 八、代数运算 九、 其他数学工具 总结 前言 Python 的原生运算符可实现基础数学运算&#xff08;加减乘除、取余、取整、幂运算&#…

低代码产品插件功能一览

下图是统计的目前市面上流行的低代码、零代码产品的插件功能。 产品名称 产品类型 官方插件数量 支持拓展 官方插件功能 宜搭 零代码 3 暂不支持 云打印、CAD看图、打印表单详情 微搭 低代码 1 暂不支持 小程序 明道云 低代码 2 支持 视图、工作流节点 简道…

《大语言模型》综述学习笔记

《A Survey of Large Language Models》英文版综述最近出了中文版书——《大语言模型》&#xff0c;本博客作为阅读笔记记录一下&#xff0c;综述主页&#xff1a;https://github.com/RUCAIBox/LLMSurvey 关于LLM的一些概述和理解 记录一些有启发性的说法&#xff1a; 1、当前…

Linux网络 | 进入数据链路层,学习相关协议与概念

前言&#xff1a;本节内容进入博主讲解的网络层级中的最后一层&#xff1a;数据链路层。 首先博主还是会线代友友们认识一下数据链路层的报文。 然后会带大家重新理解一些概念&#xff0c;比如局域网交换机等等。然后就是ARP协议。 讲完这些&#xff0c; 本节任务就算结束。 那…

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户登录

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【Spring篇】【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f3af;1.登录-持久层 &…

【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】3.1 NumPy图像大小调整实战

3.1 NumPy图像大小调整实战 目录 #mermaid-svg-uDg4hyooC74c0r2r {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uDg4hyooC74c0r2r .error-icon{fill:#552222;}#mermaid-svg-uDg4hyooC74c0r2r .error-text{fill:#5…

C++【iostream】数据库的部分函数功能介绍

在 C 编程世界中&#xff0c;iostream 库扮演着举足轻重的角色&#xff0c;它是 C 标准库的核心组成部分&#xff0c;为程序提供了强大的输入输出功能。无论是简单的控制台交互&#xff0c;还是复杂的文件操作&#xff0c;iostream 库都能提供便捷高效的解决方案。本文将深入剖…