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'
            }
        }

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

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

Answer 1

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

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

在Vuex商店中合并两个州

1 个答案: