Vuex异步更新不会更改视图

Question

我有一个VUEX商店，其对象具有以下状态

state: { owner: 0, allCats: [], availableCats: [], activeCat: null, rooms: [] }。

此突变旨在向allCats

中的一只猫添加聊天消息

addMessage: function(state, messageData) {

            let index = state.allCats.indexOf(messageData.cat);

            // if no messages are available initialize array
            if(!state.allCats[index].messages) {
                state.allCats[index].messages = [];
            }

            state.allCats[index].messages.push({
                text: messageData.message,
                type: messageData.type
            });
        }

当我在事件中立即调用触发器时，一切正常。但是，当我首先加载一些异步数据然后在then()中触发变异时，状态会发生变化，但视图不会更新。

任何人都可以向我解释为什么我会遇到这种行为以及如何解决这个问题？ 谢谢！

PS：可以在https://github.com/sarahschuetz/IM531_ProjectT1

查看回购

解决方案：

我能够通过在从数据库加载猫时立即初始化message[]来解决问题，而不是仅使用第一条消息初始化它。