如何防止 Vuex 干扰我的 class 实例?

How can I prevent Vuex from interfering with my class instance?

我正在尝试在 Vuex 中存储一个 class 的实例(来自 ProseMirror 的 EditorState)。这个 class 从外部或多或少是不可变的,这意味着无论何时我想对其进行更改,我都会将 class 的一个新实例放入 Vuex 中。

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

我通过采纳 this question 上最佳答案的建议并在将其提供给 Vuex 之前冻结我的 class 实例来修复它。

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 尝试修改对象。