关于vuex中的状态变量的思考???
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中的状态变量的思考???的更多相关文章
- 关于《Head First Python》一书中print_lol()函数的思考
关于<Head First Python>一书中print_lol()函数的思考 在<Head First Python>第一章中,讲述到Python处理复杂数据(以电影数据列 ...
- vuex中store保存的数据,刷新页面会清空
用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...
- vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations
1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...
- 简述C#中IO的应用 RabbitMQ安装笔记 一次线上问题引发的对于C#中相等判断的思考 ef和mysql使用(一) ASP.NET/MVC/Core的HTTP请求流程
简述C#中IO的应用 在.NET Framework 中. System.IO 命名空间主要包含基于文件(和基于内存)的输入输出(I/O)服务的相关基础类库.和其他命名空间一样. System.I ...
- vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
- c中#与##的应用思考
c中#与##的应用思考 原创 2014年02月25日 22:01:35 927 一. 思考出处 在读<<linux 0.12完全剖析>>初始化部分, init进程是通过fork ...
- 关于HashMap中hash()函数的思考
关于HashMap中hash()函数的思考 JDK7中hash函数的实现 static int hash(int h) { h ^= (h >>> 20) ^ (h >&g ...
- vuex中mutations与actions的区别
要执行vuex中的函数,有两种方法: 1.commit,例如this.$store.commit("GETMODULESELECTLIST"); //mutations中的方法 2 ...
- vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息
一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...
随机推荐
- [python 学习] python 多线程
1. # -*- coding: utf-8 -*- import threading import time import random def go(name): for i in range(2 ...
- windowserver 常用命令
1.查看端口占用: netstat -ano | findstr "服务端口号"2.查看程序运行id: tasklist | findstr nginx 3.杀死进程 tskk ...
- php7 mysqli_query返回1 , 但是更新失败
HTML中忘了传id
- 对calc()的研究
1.calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度 calc()最大的好处就是用在流体布局上 2.calc()使用通用的数学运算规则 使用“+”.“ ...
- C#[WinForm]实现自动更新
C#[WinForm]实现自动更新 winform程序相对web程序而言,功能更强大,编程更方便,但软件更新却相当麻烦,要到客户端一台一台地升级,面对这个实际问题,在最近的一个小项目中,本人设计了一个 ...
- Seek the Name, Seek the Fame (poj2752
Seek the Name, Seek the Fame Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 14561 Ac ...
- php7新特性的理解和比较
1. null合并运算符(??) ??语法: 如果变量存在且值不为NULL,它就会返回自身的值,否则返回它的第二个操作数. //php7以前 if判断 if(empty($_GET['param']) ...
- Java 封装 继承 多态
Java 继承 继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法 ...
- PHP-操作json
输出 json 文件中文处理 <?php $json_array = array(); // 1.转换为json字符串(不自动转换为unicode编码) if (version_compare( ...
- CSS-父元素宽度自适应子元素宽度之和
最近碰见这样一个需求,要让图片横向排列设置 x 方向的滚动条滚动查看,原本当直接创建一个 IFC(inline,float 什么的)就解决了,搞了半天发现搞不定(IFC 也是不能父元素宽度自适应子元素 ...