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

Vuex状态改变传播

1 个答案: