VueJS, Vuex und komplexer Zustand

Question

Ich habe es geschafft, VueJS Reaktivität mit meinem Vuex Store zu brechen, danke (denke ich) an ein komplexes Datenmodell. Die Daten sind eine Aufgabe von Arrays von Objekten wie folgt:

"users": { 
    "2017": [ 
    { id: 1, name: "bob" }, 
    { id: 2, name: "jane" }, 
    ], 
    "2016": [ 
    ... 
    ] 
}, 
"dude": null 

Ich hatte ursprünglich im Laden ES6 Klassen gewesen Speicher (Ich habe eine Menge von Hilfsfunktionen), aber habe, dass da entfernt.

Um den richtigen Benutzer für den Zugriff auf I eine berechnete Eigenschaft haben, wie folgt:

computed: { 
    user() { 
     return this.$store.state.users.users[this.$store.state.users.currentDate][this.$store.state.users.currentUserIndex] 
    }, 
    ... 

Das Problem tritt auf, wenn ich eine Mutation verpflichten, den Namen zu aktualisieren (zum Beispiel), kann ich in der Chrome-Vue sehen Debugger, dass der Zustand geändert hat, aber die Vorlage nicht (dh user.name weiterhin der vorherige Name ist). Hier

ist der Code für die Mutation:

PATCH_USER (state, payload) { 
    let index = state.users[state.currentDate].findIndex((el) => el.id === payload.user.id) 
    let user = Object.assign(state.users[state.currentDate][index], payload.user) 
    Vue.set(state.users[state.currentDate], index, user) 
    }, 

Nun, das Teil, das mich Ding macht mir etwas Dummes zu tun. Wenn ich eine berechnete Eigenschaft für dude (Elementstatus auf Stammebene) hinzufüge und sie dann in die Vorlage einbeziehe, wird der Benutzername korrekt aktualisiert.

Es gibt viel mehr zu der Anwendung, aber hoffentlich mache ich etwas falsch mit dem, was ich gezeigt habe.

Jede Hilfe wird sehr geschätzt!

UPDATE

Zahlen nach 8 Stunden Ringen mit dieser Antwort scheint so der Entsendung innerhalb von 2 Minuten kommen zu müssen. (danke @blockhead und @ bert-evans).

I gedacht Ich hatte den gesamten Code dafür überprüft, aber es stellt sich heraus, das allererste Mal Daten vom Backend-Server geladen wurde, war es falsch. payload ist die Antwort vom Web-API:

// bad 
SET_USERS (state, payload) { 
    state.users[state.currentDate] = payload.users 
} 

// good 
SET_USERS (state, payload) { 
    Vue.set(state.users, state.currentDate, payload.users) 
} 

Answer 1

Das Problem wurde in der Tat falsch, einen neuen Schlüssel zu einem vorhandenen Vuex Objekt zuweisen. Der folgende Code verwendet Vue.set das Problem gelöst:

SET_USERS (state, payload) { 
    // object, key, value 
    Vue.set(state.users, state.currentDate, payload.users) 
}