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.
Asked
Active
Viewed 131 times
0
-
1To be able to help you better, it would be necessary to have some pieces of your code – fchancel Sep 01 '22 at 13:17
-
Which version of Vue? And when you say FabricJS instance, do you mean the fabric module, or a canvas you're creating with Fabric? – MattP Sep 07 '22 at 16:31
-
@MattP - I'm using Nuxt2 / Vue2 - Fabric instance, not the module. – Marques Sep 08 '22 at 22:29
1 Answers
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.
MattP
- 1,920
- 1
- 15
- 22
-
I've used to store instances globally in window but it looks kinda wrong to me. Object.freeze(), seems pretty interesting, maybe it solves the "Do not mutate state outside mutatios" and the performance issues, wich I had to bypass by setting strict mode off on dev. I'll try it out. – Marques Sep 09 '22 at 12:26