Слияние двух состояний в магазине Vuex

Question

У меня есть хранилище Vuex с двумя состояниями.

• заметки (заметки, которые были синхронизированы с сервером / БД)
• localNotes (которые не были синхронизированы с сервером/ DB, при синхронизации с сервером / БД они будут переведены в состояние «заметки»)

Я использую эти состояния для отображения заметок в списке с помощью геттера.Этот геттер объединяет два объекта и возвращает объекты слияния

Проблема, с которой я столкнулся сейчас, заключается в том, что если я добавлю новую заметку в одно из состояний, она не будет отображаться в списке заметок, поскольку получатель невыберите «изменить».Я думаю, это происходит потому, что я возвращаю переменную вместо функции.

Это мой метод получения:

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 Система не обнаруживает добавление новых свойств.Попробуйте использовать Vue.set(object, key, value) при добавлении новых заметок.

В вашей функции мутации замените state.localObject[payload.id] = payload; на Vue.set(state.localObject, payload.id, payload);. Затем геттер должен работать правильно.