在Vuex商店中合并两个州

Question

我有两个状态的Vuex商店。

• 注释（已与服务器/数据库同步的注释）
• localNotes（尚未与服务器/数据库同步，当与服务器/数据库同步时，它们将被移至“注释”状态）

我正在使用这些状态在带有吸气剂的列表中显示注释。此getter合并两个对象并返回合并的对象

我现在遇到的问题是，如果我将新便笺添加到其中一个状态，则该便笺将不会显示在便笺列表中，因为吸气剂不会拾取“更改”。我认为这是因为我返回了变量而不是函数。

这是我的吸气剂：

const getters = {
    notesObject: (state, getters, rootState, rootGetters) => {
        let result = {};
        let mergedObject = {...state.notes, ...state.localNotes};
        Object.keys(mergedObject).forEach(key => {
            const item = mergedObject[key];
            if (rootGetters['tags/activeKey'] === null) {
                result[key] = item
            } else if (item.tag_id === rootGetters['tags/activeKey']) {
                result[key] = item
            }
        });
        return result;
    },
};

示例对象：

example: {
            5: {
                title: 'Testing title',
                text: 'text'
            },
            6: {
                title: 'Testing title',
                text: 'text'
            }
        }

我希望有人可以帮助我找到最佳解决方案。我当时正在考虑使用观察程序，但是我知道需要避免这些情况。

一种解决方案是让观察者将两个状态合并为一个新状态。然后，getter不必合并两个对象

Answer 1

Vue的反应系统不会检测到添加新属性。Vue.set(object, key, value)添加新笔记时请尝试使用。

在您的突变函数中state.localObject[payload.id] = payload;，Vue.set(state.localObject, payload.id, payload);将其替换为吸气剂即可正常工作。