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

這旨在作為Vue.js中的性能優化，類似於PureComponents在React中的工作。

默認情況下，僅進行淺表比較，這意味着僅檢查對對象屬性的引用。

如果將數據庫屬性重命名，刪除或向該對象添加了另一個屬性，則更改將被接受，這表明該對象的第一級發生了更改。

您可以通過添加深層或優化傳遞的屬性來減輕這種情況。

例如，如果您的db對象只有一個子屬性，則可以輕松地將其更改為類似

state: {
    databaseTables: []
}