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

这是所需的行为，为什么，还是我的代码中有一些破坏的行为？

这是在vue.js中作为性能优化的，例如，属额组件在React中起作用。

默认情况下仅进行浅浅比较，这意味着仅检查对象属性的引用。

如果数据库属性被重命名，删除或将另一个属性添加到对象中，则指示对象的第一个级别进行更改。

，将拾取更改。 。

您可以通过添加深层或优化您传递的属性来减轻这种情况。

例如，如果您的数据库对象只有一个儿童属性，则很容易将其更改为

之类的东西

state: {
    databaseTables: []
}