반응성을 트리거하지 않고 Vuex 상태 차이를 계산하는 방법

반응성을 트리거하지 않고 Vuex 상태 차이를 계산하는 방법

클릭 후 Vuex 상태가 변경되는 컴포넌트 목록이 있습니다.두 Vuex 상태 값(클릭 핸들러에서 디스패치된 액션 전과 후)의 차이를 렌더링합니다.

다음과 같은 경우가 있습니다.

<template>
<ul>
  <li v-for="item of items" @click="clickItem">{{difference}}</li>
</ul>
</template>
<script>
    export default {
        methods: {
              difference() {
                  let oldValue = this.$store.getters.getValue();
                  this.$store.dispatch(SOME_ACTION);
                  let newValue = this.$store.getters.getValue();
                  this.$store.dispatch(UNDO_SOME_CATION);
                  return newValue-oldValue;
              }
              clickItem() {
                  this.$store.dispatch(SOME_ACTION);
              }
        }
    }
</script>

그러나 문제는 작업 디스패치 시 Vuex 스토어와 Vuex 반응성이 변경되어 애플리케이션 구성 요소가 다시 렌더링되기 때문에 이 코드가 무한 렌더링 루프를 발생시킨다는 것입니다.

디스패치 액션보다 Vuex 대응성을 무효화하고 새로운 값을 취득하며 디스패치 실행 취소 액션과 대응성을 유효하게 할 가능성이 있습니까?만약 그렇다면, 내 문제를 해결할 수 있을 거야.

이것은 검증되지 않았지만 제 생각은differenceIIE(즉시 호출된 함수 표현식)에서 기능을 반환하고 디스패치 여부를 나타내는 플래그를 추가합니다.

const difference = (function() {
  let dispatched;

  return function() {
    if (dispatched) {
      dispatched = false;
      return;
    }

    let oldValue = this.$store.getters.getValue();
    this.$store.dispatch(SOME_ACTION);
    dispatched = true;

    let newValue = this.$store.getters.getValue();
    this.$store.dispatch(UNDO_SOME_CATION);
    return newValue-oldValue;
  }
})()

언급URL : https://stackoverflow.com/questions/54925852/how-to-calculate-vuex-states-difference-without-triggering-reactivity