如何在Tiptap文本编辑器中将嵌套的vuex对象绑定到vuejs属性？

问题描述

我试图将嵌套的Vuex状态对象绑定到tiptap的 editor-content 组件的 editor 属性。

状态如下：

import { ELEMENTS_DATA,DEFAULT_OPTIONS_DATA,ICONS_DATA } from '../components/editor/editor.data';

export const state = () => ({
  testEditor: null,currentElement: null,currentEditor: null,editors: [],elements: [],html: '',emailSettings: {
    options: {
      paddingTop: '50px',// paddingLeft: '5px',paddingBottom: '50px',// paddingRight: '5px',backgroundColor: '#EDF2F7',},type: 'emailSettings',});

export const getters = {
  getEditorById: (state) => (elementId) => {
    debugger;
    const { editor } = state.editors.find((editor) => editor.elementId === elementId);
    return editor;
  },};

export const mutations = {
  addNewElement(state,newElement) {
    if (Array.isArray(newElement)) {
      state.elements.push(newElement[0]);
    }
    state.elements.push(newElement);
  },addNewEditor(state,newEditor) {
    state.editors.push(newEditor);
  },updateElements(state,elements) {
    state.elements = [...elements];
  },setCurrentElement(state,element) {
    if (state.currentElement) {
      state.currentElement.active = false;
    }
    state.currentElement = element;
    state.currentElement.active = true;
  },setCurrentEditorById(state,id) {
    state.currentEditor = state.editors.find((item) => item.elementId === id);
    state.currentEditor.editor.options.editable = true;
  },updateCurrentEditor(state,editor) {
    state.currentEditor.editor = { ...editor };
  },testEditorUpdate(state,editor) {
    state.editors[0].editor = editor;
  },setEditable(state,id) {
    const currentEditor = state.email.editors.find((item) => item.elementId === id);
    currentEditor.editor.options.editable = true;
  },toggleElementActive(state,element) {
    element.active = !element.active;
  },};

存储在nuxt框架中。

client.js?06a0:97 Error: [vuex] do not mutate vuex store state outside mutation handlers.
    at assert (vuex.esm.js?2f62:135)
    at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:889)
    at Watcher.run (vue.common.dev.js?4650:4563)
    at Watcher.update (vue.common.dev.js?4650:4537)
    at Dep.notify (vue.common.dev.js?4650:741)
    at EditorView.reactiveSetter [as _props] (vue.common.dev.js?4650:1066)
    at EditorView.update (index.es.js?576a:4594)
    at EditorView.setProps (index.es.js?576a:4607)
    at Editor.setParentComponent (tiptap.esm.js?cd42:1296)
    at VueComponent.eval (tiptap.esm.js?cd42:1604)
_callee$ @ client.js?06a0:97
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ client.js?06a0:59
globalHandleError @ vue.common.dev.js?4650:1875
handleError @ vue.common.dev.js?4650:1844
run @ vue.common.dev.js?4650:4565
update @ vue.common.dev.js?4650:4537
notify @ vue.common.dev.js?4650:741
reactiveSetter @ vue.common.dev.js?4650:1066
update @ index.es.js?576a:4594
setProps @ index.es.js?576a:4607
setParentComponent @ tiptap.esm.js?cd42:1296
eval @ tiptap.esm.js?cd42:1604
eval @ vue.common.dev.js?4650:1985
flushCallbacks @ vue.common.dev.js?4650:1911
Promise.then (async)
timerFunc @ vue.common.dev.js?4650:1938
nextTick @ vue.common.dev.js?4650:1995
Vue.$nextTick @ vue.common.dev.js?4650:3520
computeIndexes @ vuedraggable.common.js?310e:2229
realList @ vuedraggable.common.js?310e:2198
run @ vue.common.dev.js?4650:4563
flushSchedulerQueue @ vue.common.dev.js?4650:4307
eval @ vue.common.dev.js?4650:1985
flushCallbacks @ vue.common.dev.js?4650:1911
Promise.then (async)
timerFunc @ vue.common.dev.js?4650:1938
nextTick @ vue.common.dev.js?4650:1995
Vue.$nextTick @ vue.common.dev.js?4650:3520
emit @ vuedraggable.common.js?310e:1969
dispatchEvent @ sortable.esm.js?aa47:916
_dispatchEvent @ sortable.esm.js?aa47:961
_onDrop @ sortable.esm.js?aa47:2166
handleEvent @ sortable.esm.js?aa47:2269
client.js?06a0:97 RangeError: Maximum call stack size exceeded
    at Function.keys (<anonymous>)
    at _traverse (vue.common.dev.js?4650:2149)
    at _traverse (vue.common.dev.js?4650:2151)
    at _traverse (vue.common.dev.js?4650:2151)
    at _traverse (vue.common.dev.js?4650:2151)
    at _traverse (vue.common.dev.js?4650:2151)
    at _traverse (vue.common.dev.js?4650:2151)
    at _traverse (vue.common.dev.js?4650:2151)
    at _traverse (vue.common.dev.js?4650:2151)
    at _traverse (vue.common.dev.js?4650:2151)

嵌套的vuex对象位于vuex存储中的editors数组中，如下图所示。

如果我采用这种方法，则会收到此vue错误日志。当我通过vue数据属性完成此操作时，它就像是一种魅力，但是升级到vuex对我来说是个难题，我不知道为什么。

1000.5

解决方法

最后，我找到了解决方案。主要问题是Vuex无法使用大型对象结构，并且我的对象编辑器包含许多功能以及嵌套的配置子对象和数组。有两种解决方法。

1. 更改vuex对象的结构
2. 在Vuex存储区的突变中对对象进行深层克隆。