Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历

今天想实现一个功能，在全局中随时改变用户的部分信息。这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象。看似一个很简单的逻辑，就体现了我基本功的不扎实呀。

代码1：

// store.js
import Vuex from 'vuex';


const store = new Vuex.Store({
  state: {
    personInfo:{}
  },
  mutations: {
    saveUserInfo(state,info){
      let data = Object.assign(state.personInfo,info); // 使用Object.assign来更新state.personInfo对象
      state.personInfo = data;
    }
  }
});

 

写完后准备测试，感觉没啥问题。可是登录成功后userInfo就是怎么样不会更新，界面上的信息也不会更新。这我就懵逼了，没感觉出来问题呀。于是怀疑saveUserInfo出了问题，中间的种种心态爆炸就不描述了，终于发现了问题。没错，就是Object.assign()这个方法我没有理解好导致了问题。

Object.assign(targetObj,sourceObj1,sourceObj2....);

这样就很好解释我的问题了

// store.js
import Vuex from 'vuex';


const store = new Vuex.Store({
  state: {
    personInfo:{}
  },
  mutations: {
    saveUserInfo(state,info){
      // 将info这个对象复制到 state.personInfo对象
      // 将处理完的state.personInfo对象赋值给data变量
      let data = Object.assign(state.personInfo,info); 
      // 此时state.personInfo里的值改变了，但是引用地址未变
      state.personInfo = data;
    }
  }
});

正确方式：

// store.js
import Vuex from 'vuex';


const store = new Vuex.Store({
  state: {
    personInfo:{}
  },
  mutations: {
    saveUserInfo(state,info){
      // 创建一个新的对象，将info,state.personInfo对象复制到新对象中
      let data = Object.assign({},state.personInfo,info); 
      // 将state.personInfo指向新对象的引用地址
      state.personInfo = data;
    }
  }
});

 

总结

computed属性监听对象时候，若对象的引导地址未改变，那么computed将不会检测到。

• 比如object中的某个key对应的value变化了，computed检测不出来。