javascript - Hur kan jag förhindra att Vuex stör min klassinstans?

Jag försöker lagra en instans av en klass i Vuex (klassen EditorState från ProseMirror). Denna klass är mer eller mindre oföränderlig från utsidan, vilket betyder att när jag vill göra ändringar i den, kommer jag bara att lägga en ny instans av klassen i Vuex.

Som sådan behöver jag inte Vues ändringsspårning här, och det verkar faktiskt som att det faktiskt stör ProseMirrors interna funktioner, så jag undrade om det fanns ett sätt att isolera mitt objekt från Vue så att det behandlas atomiskt.

Svar #1

Jag fixade det genom att ta förslaget från det bästa svaret på den här frågan och frysa min klassinstans innan jag gav den till 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"
});

Eftersom Object.freeze inte är rekursivt, har detta ingen effekt på ProseMirrors interna funktioner, men det avskräcker Vue från att försöka ändra objektet.