当前位置: 首页 > news >正文

vue 使用vuex中的data数据引用问题

先上代码:

this.userRoleInfo2 = this.$store.state.userInfo
this.userRoleInfo2.name = 111
this.userRoleInfo2.orgName = 222
this.userRoleInfo2.orgId = 4444

问题描述:

博主,定义了一个变量userRoleInfo2来接收了 从vuex中获取了userInfo用户信息,当我去改变变量userRoleInfo2中的值的时候,发现原vueX中的userInfo值跟着变化了

问题的分析
在vue中,数组和对象传递都是引用传递。赋值时传递的并不是值,而是指向了同一个空间。

解决办法
转成字符串在转成json
JSON.stringify 将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串
JSON.parse 用来解析 JSON 字符串,将数据转换为 JavaScript(对象或者数组)

//修改之后
this.userRoleInfo2 = JSON.parse(JSON.stringify(this.$store.state.userInfo)
this.userRoleInfo2.name = 111
this.userRoleInfo2.orgName = 222
this.userRoleInfo2.orgId = 4444

相关文章:

  • Type Hints in Python:python的类型注释
  • VIVADO 擦除flash
  • 在Linux本地部署开源自托管导航页配置服务Dashy并远程访问
  • 计算机组成原理-Cache替换算法
  • 【华为OD题库-048】拔河比赛-java
  • Docker+ Jenkins+Maven+git自动化部署
  • 每日一题:LeetCode-283. 移动零
  • 在Django中使用Q对象和条件运算符来构建动态查询
  • DDoS高防IP到底是什么?
  • C# 友元程序集
  • 225. 用队列实现栈 --力扣 --JAVA
  • linux下实现Qt程序实现开机自启动
  • LeetCode [简单](非递归)二叉树的中序遍历
  • Python爬虫遇到重定向URL问题时如何解决?
  • [密码学]DES
  • 【108天】Java——《Head First Java》笔记(第1-4章)
  • 08.Android之View事件问题
  • 5分钟即可掌握的前端高效利器:JavaScript 策略模式
  •  D - 粉碎叛乱F - 其他起义
  • eclipse(luna)创建web工程
  • GitUp, 你不可错过的秀外慧中的git工具
  • Hexo+码云+git快速搭建免费的静态Blog
  • JS基础之数据类型、对象、原型、原型链、继承
  • magento2项目上线注意事项
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • Odoo domain写法及运用
  • Redis的resp协议
  • Spring框架之我见(三)——IOC、AOP
  • 第十八天-企业应用架构模式-基本模式
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 扑朔迷离的属性和特性【彻底弄清】
  • 前端之Sass/Scss实战笔记
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 移动端高清、多屏适配方案
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • ​Z时代时尚SUV新宠:起亚赛图斯值不值得年轻人买?
  • ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException
  • ###C语言程序设计-----C语言学习(3)#
  • #gStore-weekly | gStore最新版本1.0之三角形计数函数的使用
  • #stm32驱动外设模块总结w5500模块
  • #我与Java虚拟机的故事#连载09:面试大厂逃不过的JVM
  • (3)STL算法之搜索
  • (C++17) optional的使用
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (补)B+树一些思想
  • (黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
  • (六)Hibernate的二级缓存
  • (一)使用IDEA创建Maven项目和Maven使用入门(配图详解)
  • (原+转)Ubuntu16.04软件中心闪退及wifi消失
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
  • (转载)在C#用WM_COPYDATA消息来实现两个进程之间传递数据
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • .net framework profiles /.net framework 配置
  • .NET Micro Framework初体验
  • .NET4.0并行计算技术基础(1)