在 VueJS 中，FabricJS 实例存储在哪里？ Window？ 维克斯？ 组件数据？

Question

Where I'm suposed to store FabricJS instances in VueJS? I tried to store it in Vuex state but Fabric instances has lots of internal methods that update the instance and triggers a "Don't mutate state outside Vuex mutations" error.

Answer 1

I see you're using Vue2, and to help Vue3 users I'll touch on it as well.

I would want to store a Fabric.js canvas in a way that won't have reactivity injected into it. Otherwise performance will likely be awful.

To store it in Vuex or component data, you can use Object.freeze() and in Vue3 there is shallowRef . Both are described a bit here .

Another option is to look into some of the state functions in VueUse, which supports Nuxt2/Vue2 and Nuxt3/Vue3.

Although not as friendly outside of.vue files, provide and inject in Vue2 or Vue3 components can be useful to share objects.

Storing in window is easy and convenient, but globals tend to come back to haunt me later. I'd use something from the options above to keep the canvas scoped.