Vuex-State-Change-Propagation

Question

Ich habe eine Frage, wie Vuex-Reaktivität funktioniert. Ich habe folgendes Geschäft:

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

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

Also, wenn die ADD_TABLE Mutation geschieht vue Komponenten und die vuex Uhr reagieren nur, wenn das Objekt direkt geändert wird und nicht auf verschachtelte Eigenschaftsänderung reagieren.

Ist dies das gewünschte Verhalten und warum, oder habe ich etwas in meinem Code brechen?

Answer 1

Dies ist als Leistungsoptimierung in Vue.js gedacht, ähnlich wie PureComponents in React zum Beispiel arbeitet.

Standardmäßig wird nur oberflächlicher Vergleich durchgeführt, was bedeutet, dass nur der Verweis auf die Objekteigenschaft überprüft wird.

Änderung wird übernommen, wenn Datenbank Eigenschaft umbenannt, entfernt oder eine andere Eigenschaft zum Objekt hinzugefügt wird, die eine Änderung in der ersten Ebene des Objekts anzeigt.

Sie können dies mindern, indem Sie Eigenschaften hinzufügen, die Sie weitergeben oder optimieren.

Zum Beispiel, wenn Ihr db Objekt nur ein einziges Kind Eigenschaft haben würde, es leicht zu so etwas wie

state: { 
    databaseTables: [] 
}