store中存取的为整个项目的公共变量,通过设置mutation来改变他们

假设现有如下代码:

const store = new Vuex.Store({
state: { userInfo:{
name:''
}
},
mutations: { setuserInfo:(state,value) => {
const obj = state;
obj.userInfo = value
}
},
getters:{ }
})

我们定义了一个userInfo变量,通过mutation方法,

1,在页面A中 我们开启keepAlive,并在第一次mounted的时候将该页面的userInfo(记录为vara)赋值为this.$store.state.userInfo(记录为varb);

2,然后我们在B页面中改变store中的这一变量:this.$store.commit('setuserInfo',res);

3,当我们回到A页面时,发现userInfo还是改变了,那么问题来了 ,我只在mounted的时候 将varb的一份引用复制给vara,之后在B页面改变的时候 使得 vara的指向另外一个res,按理来说vara还是指向之前的varb,可是结果仍旧是vara改变了

可能的原因解释:

在3步骤中我们声明了个一个赋值操作:

 const obj = state;
obj.userInfo = value
这一步的根本意思应该是将 state.
userInfo 按照属性一一赋值于value;即为了保证初始的那个引用,这里的vue内部实际操作应该是:
for(let j in value){
obj.userInfo[j] = value[j]
}
保证了其初始应用,那么 this.userInfo和this.$store.state,userInfo始终指向同一个应用,所以this.userInfo也跟着改变了
未深入vuex源码 ,所以是否这样解释正确??
未完待续。。。。。。。。。。。。

关于vuex中的状态变量的思考???的更多相关文章

  1. 关于《Head First Python》一书中print_lol()函数的思考

    关于<Head First Python>一书中print_lol()函数的思考 在<Head First Python>第一章中,讲述到Python处理复杂数据(以电影数据列 ...

  2. vuex中store保存的数据,刷新页面会清空

    用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...

  3. vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations

    1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...

  4. 简述C#中IO的应用 RabbitMQ安装笔记 一次线上问题引发的对于C#中相等判断的思考 ef和mysql使用(一) ASP.NET/MVC/Core的HTTP请求流程

    简述C#中IO的应用   在.NET Framework 中. System.IO 命名空间主要包含基于文件(和基于内存)的输入输出(I/O)服务的相关基础类库.和其他命名空间一样. System.I ...

  5. vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用

    vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...

  6. c中#与##的应用思考

    c中#与##的应用思考 原创 2014年02月25日 22:01:35 927 一. 思考出处 在读<<linux 0.12完全剖析>>初始化部分, init进程是通过fork ...

  7. 关于HashMap中hash()函数的思考

    关于HashMap中hash()函数的思考 JDK7中hash函数的实现   static int hash(int h) { h ^= (h >>> 20) ^ (h >&g ...

  8. vuex中mutations与actions的区别

    要执行vuex中的函数,有两种方法: 1.commit,例如this.$store.commit("GETMODULESELECTLIST"); //mutations中的方法 2 ...

  9. vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

    一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...

随机推荐

  1. ps:矢量格式图像

    假设我们写了一首新的乐曲,要把它交给唱片公司,可以通过两种方式: 把这首乐曲弹奏出来并录制在磁带上. 把这首乐曲的乐谱写下来. 这两种方式的最大区别在于记录的形式. 前者是记述性的.包含乐曲的音频信息 ...

  2. 【CF】38E Let's Go Rolling! (dp)

    前言 这题还是有点意思的. 题意: 给你 \(n\) (\(n<=3000\)) 个弹珠,它们位于数轴上.给你弹珠的坐标 \(x_i\) 在弹珠 \(i\) 上面花费 \(C_i\) 的钱 可以 ...

  3. Message相关函数对比

      SendMessage PostMessage  过程类型 同步过程:等待其他程序处理消息完了之后才返回,继续执行 异步过程:只把消息放入队列,不管其他程序是否处理都返回,然后继续执行 返回值 表 ...

  4. flask之数据库的交互

    一:关系型数据库 mysql Flask-SQLAlchemy管理关系型数据库. mysql数据库引擎:url : mysql://username:passowrd@hostname/databas ...

  5. js中关键字 const , let , var 的用法区别

    1.const定义的变量不可以修改,而且必须初始化. 2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. 3.let是块级作用域,函数内部使用let定义后,对函数外部无影响 ...

  6. [洛谷P3205] HNOI2010 合唱队

    问题描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个人的身高为Hi米(1000<=Hi<= ...

  7. hdu 6047: Maximum Sequence (2017 多校第二场 1003)【贪心】

    题目链接 可以贪心写,先把b数组按从小到大的顺序排个序,根据b[i]的值来产生a[n+i] 借助一个c数组,c[i]记录,j从i到n,a[j]-j的最大值,再加上一个实时更新的变量ma,记录从n+1到 ...

  8. 饿了么CTO张雪峰:允许90后的技术人员“浮躁“一点

    编者按:今年4月,饿了么正式加入了阿里新零售战队,进一步加速其在本地生活市场的扩张速度.在创业9年的时间中,饿了么在外卖领域经历了真正的“从0到1”,尤其是在外卖平台的技术升级方面,越过了一个又一个的 ...

  9. WEB前端开发的思考与感悟

    当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候,突然就深刻的体会到了这句话确实太有道理了. 最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等.遇到过 ...

  10. Linux内核设计与实现 总结笔记(第五章)系统调用

    系统调用 内核提供了用户进程和内核交互的接口,使得应用程序可以受限制的访问硬件设备. 提供这些接口主要是为了保证系统稳定可靠,避免应用程序恣意妄行. 一.内核通信 系统调用在用户空间进程和硬件设备之间 ...