如何解决如何在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无法使用大型对象结构,并且我的对象编辑器包含许多功能以及嵌套的配置子对象和数组。有两种解决方法。
- 更改vuex对象的结构
- 在Vuex存储区的突变中对对象进行深层克隆。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。