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

Question

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

我想使用 Vuex 管理画布状态。 为此，我将结构画布实例设置为 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.

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

存储此问题的 fabric 对象的最佳方法是什么？或者有更好的方法来解决这个问题？

Answer 1

将其存储在 vuex 中并不理想，我知道你会想这样做。可能是因为应用周围的多个组件想要调用画布方法。

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

尝试在一个组件中处理与画布初始化有关的所有事情(在"mounted"方法中(，然后您可以使用 Vuex 状态的手表来检测诸如何时按下添加圆圈的按钮之类的事情，然后您可以在该组件中对其进行反应。至少我是这样处理类似案件的。如果我找到更好的方法，将更新此内容。

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

Answer 2

在 Vue3 中，我将通过使用提供/注入功能来创建全局属性：

所以在主.js文件中：

// src/main.js
import { createApp, reactive } from 'vue'
import App from './App.vue'
const gobalsProperties = {'canvas': null}; 
const app = createApp(App);
app.provide('gobalsProperties', gobalsProperties)
app.mount('#app');

然后需要将其注入到您将要像这样使用它的所有组件中

export default {  
inject: ['gobalsProperties'],
...

并且可以使用this.gobalsProperties在脚本中访问它。因此，在具有<canvas >标记的组件中，您可以在挂载函数中启动this.gobalsProperties.canvas，如下所示：

mounted() { 
this.gobalsProperties.canvas = new fabric.Canvas('main-canvas')
...