Vuex에 Fabric.js 캔버스 참조 저장 - [vuex] 변환 핸들러 외부에 있는 vuex 스토어 상태를 변환하지 않음

Vuex에 Fabric.js 캔버스 참조 저장 - [vuex] 변환 핸들러 외부에 있는 vuex 스토어 상태를 변환하지 않음

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 instance 자체가 소품을 편집하고 있기 때문이라고 생각합니다.그리고 Vuex는 이것을 좋아하지 않는 것 같다.

이 문제를 해결하기 위해 패브릭 개체를 저장하는 가장 좋은 방법은 무엇입니까? 아니면 더 나은 해결 방법이 있습니까?

vuex에 저장하는 것은 이상적이지 않습니다.저는 당신이 원하는 것을 알고 있습니다.아마도 앱 주변의 여러 구성 요소가 캔버스 메서드를 호출하려고 하기 때문일 것입니다.

실행되어 오브젝트를 변경하는 이벤트 위에 복사본을 저장하는 것 같습니다.이것은 엄밀히 말하면 변환 핸들러 외부의 변환입니다.

하나의 컴포넌트에서 캔버스의 초기화와 관련된 모든 작업을 처리합니다("마운트 방식"에서는 Vuex 상태의 워치를 사용하여 원을 추가하는 버튼을 누르면 해당 컴포넌트에서 캔버스에 반응할 수 있습니다.적어도 그것이 내가 비슷한 사건들을 처리한 방법이다.더 좋은 방법이 있으면 업데이트할게요.

또한 더 나은 방법을 찾은 경우 공유하십시오.

Vue3에서는 제공/인젝트 기능을 사용하여 글로벌 자산을 만듭니다.

따라서 main.disc 파일에서 다음을 수행합니다.

// 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')
    ...

언급URL : https://stackoverflow.com/questions/62214504/storing-fabric-js-canvas-reference-in-vuex-vuex-do-not-mutate-vuex-store-sta