javascript - Vuex 状态变化传播

Question

我有一个关于 Vuex react 性设计如何工作的问题。我有以下商店:

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

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

因此，当 ADD_TABLE 突变发生时，vue 组件和 vuex 监视仅在对象直接更改时使用react，而不对嵌套属性更改使用react。

// 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 中的工作。

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

如果数据库属性被重命名、删除或另一个属性被添加到对象中，则更改将被拾取，这表明对象的第一级发生了更改。

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

例如，如果您的数据库对象只有一个子属性，则可以轻松将其更改为类似的内容

state: {
    databaseTables: []
}