在VueJS中应将FabricJS实例存储于何处？Window？Vuex？组件数据？

别把FabricJS实例放在Vuex里——正如你遇到的问题，Fabric的实例内部会频繁自我更新状态，而Vuex的严格模式会把这些内部修改判定为“mutation外的非法状态变更”，直接抛出错误。下面是几个更合适的存储方案：

1. 组件私有实例属性（推荐单组件使用场景） #

直接把Fabric实例存在组件自身的属性中，比如在mounted钩子初始化后赋值给this的属性，或者放在组件的data里（不过data会被Vue做响应式处理，没必要，直接挂在实例上更高效）：

export default {
  mounted() {
    // 直接挂载到组件实例上
    this.canvas = new fabric.Canvas('canvas-container');
  },
  methods: {
    addRectangle() {
      const rect = new fabric.Rect({ width: 80, height: 80, fill: '#42b983' });
      this.canvas.add(rect);
    }
  }
}

这种方式完全隔离了Fabric的内部状态变更，不会触发Vuex的检测逻辑，适合仅单个组件用到Fabric的场景。

2. 全局单例模块（多组件共用同一实例场景） #

如果多个组件需要操作同一个Fabric画布，可以单独创建一个模块来管理实例，避免全局污染的同时保证实例唯一：

// src/utils/fabricInstance.js
import fabric from 'fabric';

let canvasInstance = null;

export const getCanvas = (elementId) => {
  if (!canvasInstance) {
    canvasInstance = new fabric.Canvas(elementId);
  }
  return canvasInstance;
};

然后在需要的组件中导入使用：

import { getCanvas } from '@/utils/fabricInstance';

export default {
  mounted() {
    this.canvas = getCanvas('shared-canvas');
  }
}

注意要确保DOM元素已经渲染完成后再调用getCanvas，避免初始化失败。

3. Provide/Inject（多层组件共用场景） #

如果是组件树内的多层组件需要共用Fabric实例，可以用Vue的provide/inject机制，把实例从顶层组件传递下去：
顶层组件：

export default {
  mounted() {
    this.canvas = new fabric.Canvas('canvas-root');
  },
  provide() {
    return {
      fabricCanvas: this.canvas
    };
  }
}

下层子组件：

export default {
  inject: ['fabricCanvas'],
  methods: {
    refreshCanvas() {
      this.fabricCanvas.renderAll();
    }
  }
}

这种方式比全局单例更可控，实例的作用范围被限定在组件树内部，不会影响外部代码。

内容的提问来源于stack exchange，提问作者Marques