javascript - 在 Vuex 中存储 Fabric.js Canvas 引用 - [vuex] 不要在突变处理程序之外改变 vuex 存储状态

Question

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

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

突变

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

在 Vue 组件中

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

在另一个变化中，我必须向 Canvas 添加一个对象:

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

运行这个突变时我得到以下错误:

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

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

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

Answer 1

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

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

尝试在一个组件中处理与 Canvas 初始化有关的所有事情(在“mounted”方法中)，然后您可以使用 Vuex 状态的监视来检测诸如何时按下添加圆圈的按钮，然后您可以在该组件中对其使用react。至少我是这样处理类似案件的。如果我找到更好的方法，会更新这个。

此外，如果您找到更好的方法，请分享。