Saving the reference of a Fabric.js Canvas in Vuex - [vuex] refrain from altering the vuex store state outside of mutation handlers

Question

Saving the reference of a Fabric.js Canvas in Vuex - [vuex] refrain from altering the vuex store state outside of mutation handlers

I'm developing a Vue Application that utilizes Fabric.js to manage the canvas element.

My goal is to control the canvas state through Vuex. To achieve this, I have assigned the fabric canvas instance to a Vuex state variable.

Mutation

setCanvas(state, canv) {
    state.canvas = canv
  }

Within Vue Component

const canvas = new fabric.Canvas('main-canvas')
this.setCanvas(canvas) //execute the mutation

In another mutation, my task is to add an object to the canvas:

addLayer(state, layer) {
    state.canvas.add(layer)
 }

Upon executing this mutation, I encounter the following error:

[vuex] do not mutate Vuex store state outside mutation handlers.

My theory is that the fabric.js instance is modifying its properties internally, which Vuex does not permit.

What would be the most effective approach to resolve this issue and properly store the fabric object? Alternatively, is there a more efficient solution available?

javascript vue.js canvas vuex fabricjs

Answer 1

Answer №1

Storing it in the vuex may not be the most optimal solution, but I understand why you might consider doing so. Perhaps because multiple components throughout your app need access to the canvas methods.

It appears that storing it in Vuex copies over events that trigger mutations outside of the mutation handler, which can lead to unintended consequences.

You might want to consider handling all canvas initialization in a single component (using the "mounted" method), and then use Vuex state watches to track events like when a button is clicked to add a circle. This way, you can respond to these events within the component itself. This is how I've approached similar situations in the past. I'll update if I come across a better approach.

If you have discovered a more effective method, please feel free to share.

Answer 2

Storing it in the vuex may not be the most optimal solution, but I understand why you might consider doing so. Perhaps because multiple components throughout your app need access to the canvas methods.

It appears that storing it in Vuex copies over events that trigger mutations outside of the mutation handler, which can lead to unintended consequences.

You might want to consider handling all canvas initialization in a single component (using the "mounted" method), and then use Vuex state watches to track events like when a button is clicked to add a circle. This way, you can respond to these events within the component itself. This is how I've approached similar situations in the past. I'll update if I come across a better approach.

If you have discovered a more effective method, please feel free to share.

Answer 3

Answer №2

When working with Vue3, I will utilize the provide/inject feature to establish a global property:

In the main.js file:

// src/main.js
import { createApp, reactive } from 'vue'
import App from './App.vue'

const globalProperties = {'canvas': null}; 

const app = createApp(App);
app.provide('globalProperties', globalProperties)
app.mount('#app');

This property must be injected into all components where it will be used like this

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

It can then be accessed in the script using this.globalProperties. For example, in the component containing the <canvas \> tag, you can initialize this.globalProperties.canvas in the mounted function as follows:

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

Answer 4

When working with Vue3, I will utilize the provide/inject feature to establish a global property:

In the main.js file:

// src/main.js
import { createApp, reactive } from 'vue'
import App from './App.vue'

const globalProperties = {'canvas': null}; 

const app = createApp(App);
app.provide('globalProperties', globalProperties)
app.mount('#app');

This property must be injected into all components where it will be used like this

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

It can then be accessed in the script using this.globalProperties. For example, in the component containing the <canvas \> tag, you can initialize this.globalProperties.canvas in the mounted function as follows:

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

Saving the reference of a Fabric.js Canvas in Vuex - [vuex] refrain from altering the vuex store state outside of mutation handlers

Answer №1

Answer №2

Similar questions

When attempting to display a sub view in Express, a 404 error is encountered

Node.js used to create animated gif with unique background image

Issue with accessing Protractor spec file location

Adjust the size of the leaflet popup with Vue2Leaflet's l-popup component

How can you access a sibling of the parent element of the current element in Jquery?

Changing UUID from binary to text and vice versa in NodeJS

The problem with escaping characters in Javascript occurs when a backslash is duplicated within an object

What is the best way to modify the color of an individual row in an HTML table by simply clicking a button within that specific

Exploring the occurrence of immutation within nested arrays inside objects

What is the best way to extract menu and submenu information from an array?

I am looking to develop a unique event that can be triggered by any component and listened to by any other component within my Angular 7 application

Using JavaScript to open a fresh window (Google Maps), eliminating the previous event handler

The link and source attributes are missing from the .ejs template

The usage of ngRoute clashes with the functionality of Animated Scroll

elevate the div with a floating effect

Encountered an Angular 1.6 Error: The requested URL at http://127.0.0.1:56035/[url] could not be found (404

Rendering HTML is not supported by AngularJS on Android 19 with version 4.4.4 and Safari 8.0.5

I am having trouble getting the color, metalness, lights, and shaders to work properly in Three JS on my

Is it possible to merge node modules that have similar functionalities?

Develop a fresh AngularJS directive that utilizes the HTML5 audio element