Javascript 在Vuex中存储Fabric.js画布引用-[Vuex]不在变异处理程序之外变异Vuex存储状态

我正在创建一个Vue应用程序，它使用Fabric.js来管理画布

我想使用Vuex管理画布状态。 为此，我将fabric canvas实例设置为vuex状态变量

突变

setCanvas（状态，canv）{
state.canvas=canv
}

在Vue组件中

const canvas=new fabric.canvas（'main-canvas'））
this.setCanvas（canvas）//提交变异

在另一个变体中，我必须向画布添加一个对象：

addLayer（状态，层）{
state.canvas.add（层）
}

运行此变异时，我会出现以下错误：

[vuex] do not mutate Vuex store state outside mutation handlers.

我认为原因是fabric js实例本身正在编辑道具。vuex似乎不喜欢这样

---

对于此问题，存储结构对象的最佳方法是什么？或者有更好的解决方法吗？

将其存储在vuex中并不理想，我知道您为什么要这样做。可能是因为应用程序中的几个组件希望调用canvas方法

它似乎将其副本存储在触发的事件上并更改对象，从技术上讲，这是变异处理程序之外的变异

尝试在一个组件中处理与画布初始化有关的一切（在“mounted”方法中），然后您可以使用Vuex状态表来检测诸如按下用于添加圆的按钮等情况，然后您可以在该组件中对其作出反应。至少我是这样处理类似案件的。如果我找到更好的方法，我会更新这个

此外，如果你找到了更好的方法，请与他人分享