Vuex 상태 변경 전파

Question

Vuex 반응성이 작동하도록 설계된 방법에 대한 질문이 있습니다. 나는 다음 저장소에 저장이 있습니다

// state 
state: { 
    database: { 
     tables: [] 
    } 
} 

// mutator 
ADD_TABLE(state, {table}) { 
    state.database.tables.push(table); 
} 

ADD_TABLE 돌연변이 VUE 구성 요소와 vuex 시계 개체가 직접 변경할 경우에만 반응하고 중첩 된 속성의 변화에 ​​반응하지 발생 그래서

.

// after the mutation happens 
store.watch(state => state.database, change => console.log(change)) // this doesn't log 
store.watch(state => state.database.tables, change => console.log(change)) // this does 

원하는 동작입니까? 아니면 내 코드가 손상 되었습니까?

Answer 1

PureComponents가 React와 같이 작동하는 것과 마찬가지로 Vue.js의 성능 최적화를위한 것입니다.

기본적으로 얕은 비교 만 수행됩니다. 즉, 개체 속성에 대한 참조 만 확인됩니다.

데이터베이스 속성의 이름이 변경되거나 제거되었거나 개체의 첫 번째 수준이 변경되었음을 나타내는 다른 속성이 개체에 추가 된 경우 변경 사항이 선택됩니다.

지나가는 특성을 깊게 또는 최적화하여 추가하면이를 완화 할 수 있습니다. 당신의 DB 객체는 하나의 자식 속성을했을 경우, 예를 들어

은 쉽게

state: { 
    databaseTables: [] 
}