3

I am trying to store an instance of a class in Vuex (the EditorState from ProseMirror). This class is more or less immutable from the outside, meaning that whenever I want to make changes to it, I will just put a new instance of the class into Vuex.

As such, I do not need Vue's change tracking here, and in fact it actually seems to interfere with the internal workings of ProseMirror, so I was wondering if there was a way that I could isolate my object from Vue so that it is treated atomically.

laptou
  • 6,389
  • 2
  • 28
  • 59

1 Answers1

1

I fixed it by taking the suggestion from the top answer on this question and freezing my class instance before giving it to 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"
});

Since Object.freeze is not recursive, this doesn't have any effect on the internal workings of ProseMirror, but it discourages Vue from trying to modify the object.

laptou
  • 6,389
  • 2
  • 28
  • 59
  • Do you implement a getter? (If not, why put it into vuex?) I tried this approach but the vue browser plugin was then crashing on it (due to it being large, not due to it being frozen, as far as I can tell). – Darren Cook Sep 03 '19 at 07:39