vue3中对本地存储的数据多次修改并实时页面显示

2023-11-18

背景:项目中遇到切换用户时,对App页面的信息进行实时显示,登录时存储一次,切换时再次存储;

解决办法:

1.在每次存储的同时存储到pinia中,可解决实时显示问题;


          import {useCommonStore} from '@/pinia'
………………………………………………………………………………
          ls_setItem(allLocalStorageName.userInfo, res.user);
          let commonStore = useCommonStore();
          commonStore.userInfo=res.user

2.在pinia的state中对值设置本地存储的数据,解决刷新页面时数据丢失问题。

userInfo:ls_getItem(allLocalStorageName.userInfo),

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3中对本地存储的数据多次修改并实时页面显示 的相关文章

  • react项目中使用react-dnd实现列表的拖拽排序

    现在有一个新需求就是需要对一个列表 实现拖拽排序的功能 要实现的效果如下图 可以通过 react dnd 或者 react beautiful dnd 两种方式实现 今天先讲下使用react dnd是如何实现的 github地址 https
  • 1011 A+B 和 C

    给定区间 231 231 内的 3 个整数 A B 和 C 请判断 A B 是否大于 C 输入格式 输入第 1 行给出正整数 T 10 是测试用例的个数 随后给出 T 组测试用例 每组占一行 顺序给出 A B 和 C 整数间以空格分隔 输出
  • linux下更改文件的权限

    更改所属组 chgrp 语法 chgrp 组名 文件名 root localhost groupadd testgroup root localhost touch test1 root localhost ls l test1 rw r

随机推荐

  • SQL巧用表的自连接和运算符代替排序的几个例子

    MySQL巧用表的自连接和运算符代替排序的几个例子 目录 MySQL巧用表的自连接和运算符代替排序的几个例子 例1 SQL18 例2 SQL23 例3 SQL87 例1 SQL18 获取当前薪水第二多的员工的emp no以及其对应的薪水sa
  • Spring Boot项目的真实程序入口

    基于 spring boot start开发的项目 其程序入口并不是我们开发的业务代码中定义了 main 函数的类 而是 Spring Boot 定义的 JarLauncher 类 下文源码反编译自 spring boot loader 1
  • 遇到bug我们如何分析定位?

    前言 日常工作中 每天可能都会遇到不同的bug 有些刚入行的测试喜欢不加分析就直接甩给开发去解决 开发比较闲还好 如果手头工作比较多 就容易烦 甚至有可能是后端的问题 但是你却把问题丢给了前端 这种事情发生的次数多了 就比较容易暴露水平 那
  • ConcurrentHashMap 常见面试题详解

    ConcurrentHashMap 1 ConcurrentHashMap的数据结构 数组 链表 采用了分段锁的实现机制 2 ConcurrentHashMap初始化 首先会创建segment数组 长度为默认 16 或传入的并发值的大于等于
  • Objective-C中的block

    在Objective C的开发过程中 我们经常用到block 这里就简单总结一下block在Objective C的几种使用方式 1 简单介绍一下block 代码块Block是对C语言的扩展 用来实现匿名函数的特性 Block是一种特殊的数
  • QIIME2-单端数据Deblur

    QIIME2学习 QIIME2分析之单端数据的导入与Deblur 文章目录 QIIME2学习 前言 一 导入数据 查看文件的原始数据的序列数等信息 导出qzv文件查看 二 Deblur 1 按测序碱基质量过滤序列 2 去噪16S过程 3 输
  • 了解 node周边生态

    前言 Node js 周边的生态非常强大 NPM Node包管理 上有超过60万个模块 日下超过载量3亿次 但对新人和其它语言背景的开发者来说 了解node周边生态不是一件容易的事 在入门之前需要弄懂不少复杂的概念 废话不多说 来看看本次分
  • Windows Ubuntu 双系统安装教程

    基本步骤 1 确定自己的硬盘分区 并分区 以我120G固态硬盘 500G机械硬盘的笔记本电脑为例 不打游戏的码农 win用于生活 ubuntu用于工作 C盘 80G固态硬盘 设为ntfs文件格式 用来放Windows系统及相关软件 分区 大
  • Vue中mapbox的使用

    Vue中mapbox的使用 1 首先下载包文件 cnpm i mapbox gl S 2 导入包文件 main js中导入 import mapBoxGl from mapbox gl Vue prototype mapboxgl mapB
  • jwt 私钥_基于JWT的token弱密钥爆破

    JSON Web Token JWT 是目前最流行的跨域身份验证解决方案 直接根据token取出保存的用户信息 以及对token可用性校验 大大简化单点登录 JWT header payload signature 以 相隔 例 eyJhb
  • SpringBoot3基础:最简项目示例

    说明 本文建立一个最基本的SpringBoot3项目 依赖项仅包含 spring web SpringMVC 备注 SpringBoot3需要JDK17支持 配置方法参考 SpringBoot3项目中配置JDK17 项目结构图示 POM
  • 现在学UI设计有前途吗?UI设计收入大概多少

    随着互联网的高速发展以及大量的人奔涌进入UI设计行业 我们发现想要通过UI实现高薪就业变得不再容易 这让很多人担忧 现在学UI设计还有前途吗 千锋郑州UI设计老师从市场需求 就业薪资以及职业发展方向三个角度分析后可以负责的告诉你有前途 UI
  • docke的基础入门

    docker基础入门操作 一 如何安装docker 一 如何安装docker 安装docker命令通过一下命令顺序执行 即可进行安装 校验操作系统内核版本 要求是3 10以上的版本 1 安装一些必要的系统工具 其中yum utils包含yu
  • 由于找不到vcomp140.dll无法继续执行此代码?该怎么修复呢?

    在使用计算机过程中 我们有时会遇到缺少vcomp140 dll文件的问题 这可能导致某些应用程序无法正常运行 遇到了缺少vcomp140 dll文件的问题 这给我的正常工作和娱乐带来了一些困扰 经过一番努力 我成功修复了这个问题 并对此总结
  • shell中括号的特殊用法 linux if多条件判断

    shell中括号的特殊用法 linux if多条件判断 一 bash 单双括号 基本要素 两个符号左右都要有空格分隔 内部操作符与操作变量之间要有空格 如 a b 字符串比较中 gt lt 需要写成 gt lt 进行转义 中字符串或者 变量
  • Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierImpl.getM的原因及解决办法

    一 原因 从别人那里拿来的gradle项目 然后自己用idea跑的时候报错 Cause org jetbrains plugins gradle tooling util ModuleComponentIdentifierImpl getM
  • linux 解锁用户被锁

    一般我们在开发时部署好了环境 有时候用xshell 登录服务器时我们经常会忘记用户的登录密码 我们经常会遇到用户被锁定 首先 用root 用户查看 查看被锁用户的错误登录次数 pam tally2 u tom tom 为用户 pam tal
  • qt集成cef QWidget

    编译libcef dll wrapper 假设你已经编译出了libcef dll wrapper lib Debug和Release版本 并且对应版本的程序集类型分别是 MDd和MD qt的运行时库是MDd类型的 因此cef3编译的时候也应
  • hive 异常之 MetaException

    直接启动hive后 hive gt show databases FAILED SemanticException org apache hadoop hive ql metadata HiveException java lang Run
  • vue3中对本地存储的数据多次修改并实时页面显示

    背景 项目中遇到切换用户时 对App页面的信息进行实时显示 登录时存储一次 切换时再次存储 解决办法 1 在每次存储的同时存储到pinia中 可解决实时显示问题 import useCommonStore from pinia ls set