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()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。他将返回目标对象。

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检测不出来。