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檢測不出來。