Vuex 저장소의 두 상태 병합

Vuex 저장소의 두 상태 병합

저는 두 개의 주를 가진 Vuex 매장을 가지고 있습니다.

• notes(서버/DB와 동기화된 노트)
• localNotes(서버/DB와 동기화되지 않았으며, 서버/DB와 동기화되면 'notes' 상태로 이동합니다.)

이러한 상태를 사용하여 getter를 사용하여 목록에 있는 노트를 표시합니다.이 getter는 두 개체를 병합하고 병합 개체를 반환합니다.

현재 문제는 상태 중 하나에 새 노트를 추가하면 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는 두 개체를 병합할 필요가 없습니다.

Vue의 반응성 시스템은 새로운 속성을 추가하는 것을 감지하지 못합니다.사용해보십시오.Vue.set(object, key, value)새 노트를 추가할 때 사용합니다.

돌연변이 함수에서 대체state.localObject[payload.id] = payload;와 함께Vue.set(state.localObject, payload.id, payload);그런 다음 게터가 제대로 작동해야 합니다.

언급URL : https://stackoverflow.com/questions/54736974/merge-two-states-in-vuex-store