如何防止Vuex干扰我的类实例？

Question

我正在尝试在Vuex（ProseMirror中的EditorState）中存储类的实例。该类从外部几乎是不可变的，这意味着每当我要对其进行更改时，我都会将一个新的类实例放入Vuex中。

这样，我在这里不需要Vue的更改跟踪，实际上，它实际上似乎在干扰ProseMirror的内部工作，因此我想知道是否存在一种方法可以将我的对象与Vue隔离开来，以便被原子处理。

Answer 1

我通过从this question的最高答案中获取建议，并在将其提供给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"
});

由于Object.freeze不是递归的，因此这对ProseMirror的内部运行没有任何影响，但是不鼓励Vue尝试修改该对象。