I'm attempting to connect the nested Vuex state object to the editor property of the tiptap's editor-content component.
The structure of the state is as follows:
<template>
<table
:style="{ backgroundColor: element.options.backgroundColor }"
class="main"
width="100%"
cellspacing="0"
cellpadding="0"
border="0"
align="center"
style="display: table;"
data-type="title"
>
<tbody>
<tr>
<td>
class="border-9/5 border-dashed border-transparent hover:border-blue-200"
:class="{
'border-builder-blue shadow border-dashed cursor-auto hover:border-builder-blue':
element.active,
'cursor-pointer': !element.active,
}"
>
<div
:align="element.options.align"
:style="{
paddingTop: element.options.padding[0],
paddingRight: element.options.padding[1],
paddingBottom: element.options.padding[2],
paddingLeft: element.options.padding[3],
}"
style="color: #757575;"
data-block-id="background"
>
<editor-content :editor="computedEditor" />
</div>
</div>
</td>
</tr>
</tbody>
</table>
</template>
<script>
import { EditorContent, Editor } from 'tiptap';
export default {
components: {
EditorContent,
},
props: ['element'],
data() {
return {
content: null,
options: {},
id: '',
};
},
computed: {
computedEditor: {
get() {
return this.$store.state.email.editors[0].editor;
},
set(value) {
this.$store.commit('email/testEditorUpdate', value);
},
},
},
};
</script>
<style></style>
This Vuex object is part of the editors array in the Vuex store as shown below.
When I attempt this method, I encounter an error log from Vue. Previously, when using vue data properties, it worked smoothly but transitioning to Vuex has proven to be a challenge for me and the reason behind this issue is unclear.
Error message:
Error: [vuex] do not mutate vuex store state outside mutation handlers.
RangeError: Maximum call stack size exceeded
This error arises due to mutating the Vuex store state outside mutation handlers, causing an overflow in the call stack limit.