Vuex - 변환 핸들러를 무시하고 항상 저장 데이터를 직접 변환하는 것이 좋은 생각입니까?

Vuex - 변환 핸들러를 무시하고 항상 저장 데이터를 직접 변환하는 것이 좋은 생각입니까?

변환 핸들러를 사용하려면 직접 돌연변이(공식 지침을 따르는 경우)에 비해 수백 배 더 많은 코드를 작성해야 합니다. 즉, 변환 핸들러는 모든 중첩된 상태 속성에 대해 계산된 속성을 요구하고 돌연변이를 저장해야 하기 때문입니다.

변이 핸들러를 사용하지 않는 것이 이론적으로 일부 오류의 원인을 추적하는 것을 더 어렵게 만든다는 것을 알지만, 실제로 특정 상태 속성을 변경하는 기능이 몇 개만 있다면, 대부분의 경우 돌연변이는 일부 오류에 의해 야기되기 때문에 이벤트 논리에 따라 오류를 일으킨 함수를 결정하는 것은 매우 쉽습니다.알려진 이벤트(버튼 누름, 입력 변경 등)이기 때문에 특정 이벤트 중에 오류가 발생했을 때 변환 핸들러를 사용하지 않고 원인이 된 함수를 추적하는 것은 그리 어렵지 않습니다.

문제는 모든 컴포넌트가 변환 핸들러를 사용하지 않고 (디버깅을 제외한) 스토어 데이터를 직접 변환하면 실제로 무엇을 잃게 되는가 하는 것입니다.

예를 들어 다음과 같습니다.

App.vue

<v-btn @click="createNewItem({ type: 'file', extension: 'txt' })">
  Create new item
</v-btn>

methods: {
  createNewItem (params) {
    // Set dialog data
    this.$store.state.dialogs.createNewItemDialog.data = { 
      ...this.$store.state.dialogs.createNewItemDialog.data,
      ...params 
    }
    // Open dialog
    this.$store.state.dialogs.createNewItemDialog.isOpened = true
  }
}

Dialogs.vue

<v-dialog v-model="$store.state.dialogs.createNewItemDialog.isOpened">
  <div class="title">
    Create new {{$store.state.dialogs.createNewItemDialog.data.type}}
  </div>
  <v-text-field
    v-model="createNewItemDialog.data.name"
  />
  <v-btn @click="$store.state.dialogs.createNewItemDialog.isOpened = false">
    close dialog
  </v-btn>
</v-dialog>

// NO COMPUTED PROPERTIES NEEDED

store.js

state = {
  dialogs: {
    createNewItemDialog: {
      value: false,
      data: {
        type: 'file',
        name: '',
        extension: ''
      }
    } 
  }
}

// NO MUTATIONS AND ACTIONS NEEDED

실수로 $store의 변수를 직접 참조하게 되어 생산 오류가 발생했던 것으로 기억하기 때문에, 어쨌든 무엇이 문제였는지 기억나지 않습니다. 우연의 일치일지도 모릅니다.

돌연변이를 사용하여 상태 변화를 한 곳에서 처리해야 하는 또 다른 이유."부작용"이 있는 경우, 예를 들어 상태 속성 중 하나를 삭제한 경우 다른 속성을 삭제하거나 다시 계산하도록 지시할 수 있습니다.

문제는 모든 컴포넌트가 변환 핸들러를 사용하지 않고 (디버깅을 제외한) 스토어 데이터를 직접 변환하면 실제로 무엇을 잃게 되는가 하는 것입니다.

vue-devtools Vuex 디버깅 정보가 손실됩니다.업데이트는 표시되지 않습니다.

질문은 그럴 수 있다.정말 필요한 게 뭐야?대응형 글로벌인 경우dialogs필요한 것을 말합니다.그러면 그렇게 쓸 수 있어요.

하지만 어쩌면 Vuex가 그 목적을 위해 과잉 살상일지도 몰라

시야가 흐트러질 거예요.현재는 어플리케이션이 단순할 수 있지만, 향후 새로운 기능을 추가할 예정이기 때문에 어플리케이션이 변경될 수 있습니다.

이미 돌연변이의 장점에 대해 언급하셨잖아요장기 프로젝트라면 추가 라인도 가치가 있을 수 있습니다.

언급URL : https://stackoverflow.com/questions/65038474/vuex-is-it-a-good-idea-to-ignore-mutation-handlers-and-always-mutate-the-store