Vuex가 클래스 인스턴스에 간섭하지 않도록 하려면 어떻게 해야 합니까?

Vuex가 클래스 인스턴스에 간섭하지 않도록 하려면 어떻게 해야 합니까?

Vuex(ProdeMirror의)에 클래스의 인스턴스를 저장하려고 합니다.이 클래스는 외부에서 거의 불변하기 때문에 변경할 때마다 클래스의 새 인스턴스를 Vuex에 넣습니다.

따라서 여기서 Vue의 변경 추적이 필요하지 않고 실제로 ProdeMirror의 내부 동작을 방해하는 것 같기 때문에 Vue에서 객체를 분리하여 원자적으로 처리할 수 있는 방법이 없을까 생각했습니다.

이 질문에 대한 상위 답변의 제안을 받아들여 Vuex에게 주기 전에 클래스 인스턴스를 동결함으로써 수정했습니다.

const store = new Store<AppState>({
    state: {
        editor: Object.freeze(editorState), // freeze because Vue reactivity messes it up
        filename: null,
        metadata: {}
    },
    mutations: {
        updateDocument(context, transaction: Transaction) {
            console.log("updateDocument called");

            // freeze again
            context.editor = Object.freeze(context.editor.apply(transaction));
        }
    },
    strict: process.env.NODE_ENV === "development"
});

는 재귀적이지 않기 때문에 ProdoMirror의 내부 동작에는 영향을 주지 않지만 Vue가 개체를 수정하지 않도록 합니다.

언급URL : https://stackoverflow.com/questions/56412419/how-can-i-prevent-vuex-from-interfering-with-my-class-instance