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源码 ,所以是否这样解释正确??
未完待续。。。。。。。。。。。。