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