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. [python 学习] python 多线程

    1. # -*- coding: utf-8 -*- import threading import time import random def go(name): for i in range(2 ...

  2. windowserver 常用命令

    1.查看端口占用: netstat -ano | findstr "服务端口号"2.查看程序运行id: tasklist | findstr  nginx 3.杀死进程  tskk ...

  3. php7 mysqli_query返回1 , 但是更新失败

    HTML中忘了传id 

  4. 对calc()的研究

    1.calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度 calc()最大的好处就是用在流体布局上 2.calc()使用通用的数学运算规则 使用“+”.“ ...

  5. C#[WinForm]实现自动更新

    C#[WinForm]实现自动更新 winform程序相对web程序而言,功能更强大,编程更方便,但软件更新却相当麻烦,要到客户端一台一台地升级,面对这个实际问题,在最近的一个小项目中,本人设计了一个 ...

  6. Seek the Name, Seek the Fame (poj2752

    Seek the Name, Seek the Fame Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14561   Ac ...

  7. php7新特性的理解和比较

    1. null合并运算符(??) ??语法: 如果变量存在且值不为NULL,它就会返回自身的值,否则返回它的第二个操作数. //php7以前 if判断 if(empty($_GET['param']) ...

  8. Java 封装 继承 多态

    Java 继承 继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法 ...

  9. PHP-操作json

    输出 json 文件中文处理 <?php $json_array = array(); // 1.转换为json字符串(不自动转换为unicode编码) if (version_compare( ...

  10. CSS-父元素宽度自适应子元素宽度之和

    最近碰见这样一个需求,要让图片横向排列设置 x 方向的滚动条滚动查看,原本当直接创建一个 IFC(inline,float 什么的)就解决了,搞了半天发现搞不定(IFC 也是不能父元素宽度自适应子元素 ...