VueJS，Vuex和複雜狀態

我已經設法打破VueJS反應與我的Vuex商店感謝（我認爲）複雜的數據模型。的數據是對象數組的目的如下：VueJS，Vuex和複雜狀態

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

我最初是存儲在所述存儲ES6類（我有很多的輔助功能），但具有由於刪除了。

爲了訪問我有一個計算屬性如下正確的用戶：

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

當我提交的突變來更新名稱（例如）將出現問題，我可以在Chrome Vue的看到調試器狀態已經改變，但模板沒有改變（即user.name仍然是以前的名稱）。

下面是突變代碼：

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) 
    },

現在，這部分讓我的事情我做一些愚蠢的。如果我爲dude（根級狀態項）添加一個計算屬性，然後將其包含在模板中，則用戶名將被正確更新。

應用程序還有很多內容，但希望我對我所展示的內容做錯了什麼。

任何幫助非常感謝！

UPDATE 8小時這個答案摔跤後

圖似乎已經走到2分鐘張貼到SO的範圍內。（感謝@blockhead和@ bert-evans）。

我想到我已經檢查了所有的代碼，但事實證明，第一次數據從後端服務器加載它是錯誤的。從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) 
}

來源

2017-05-30 krsyoung

如果你看到在VUE開發工具馬上更新，而無需刷新，這意味着它已經反應。 – blockhead

你如何更新用戶？我們可以看到代碼嗎？ – Bert

問題確實是不正確分配一個新的密鑰，以現有的Vuex對象。使用Vue.set下面的代碼解決了這個問題：

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

來源

2017-06-02 21:49:49 krsyoung

VueJS，Vuex和複雜狀態

回答

相關問題