Question

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

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

突变

setCanvas(state, canv) {
    state.canvas = canv
  }

在Vue组件中

const canvas = new fabric.Canvas('main-canvas')
this.setCanvas(canvas) //commit the mutation

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

addLayer(state, layer) {
    state.canvas.add(layer)
 }

运行此突变时，出现以下错误：

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

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

针对此问题存储结构对象的最佳方法是什么？还是有更好的解决方法？

Answer 1

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

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

尝试在一个组件中处理所有与画布初始化有关的事情（在“ mount”方法中），然后您可以使用Vuex状态监视来检测诸如按下添加圆圈的按钮之类的事情，那么您可以在该组件中对其做出反应。至少这就是我处理类似案件的方式。如果我找到更好的方法，将对此进行更新。

也可以分享，如果您找到了更好的方法。