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: []
}