在 Vuex 中存储 Fabric.js 画布引用 - [vuex] 不会在突变处理程序之外改变 vuex 存储状态答案

【问题标题】：Storing Fabric.js Canvas reference in Vuex - [vuex] do not mutate vuex store state outside mutation handlers在 Vuex 中存储 Fabric.js 画布引用 - [vuex] 不会在突变处理程序之外改变 vuex 存储状态
【发布时间】：2020-09-24 14:39:38
【问题描述】：

我正在创建一个使用 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.

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

为这个问题存储织物对象的最佳方法是什么？还是有更好的办法解决？

【问题讨论】：

标签： javascript vue.js canvas vuex fabricjs

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

对于 Vue3，我将通过使用 provide/inject 功能来创建全局属性来解决这个问题：

所以在 main.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')
    ...

【讨论】：