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