javascript - 在 Vuex store 中合并两个状态

Question

我有一个有两个状态的 Vuex store。

• 笔记(已与服务器/数据库同步的笔记)
• localNotes(尚未与服务器/数据库同步，当与服务器/数据库同步时，它们将移动到“注释”状态)

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

我现在遇到的问题是，如果我向其中一个状态添加新注释，它将不会显示在注释列表中，因为 getter 不会选择“更改”。我认为发生这种情况是因为我返回了一个变量而不是函数。

这是我的 setter/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 的 reactivity系统未检测到添加新属性。添加新注释时尝试使用 Vue.set(object, key, value)。

在您的突变函数中，将 state.localObject[payload.id] = payload; 替换为 Vue.set(state.localObject, payload.id, payload);然后 getter 应该可以正常工作。