컴포넌트 템플릿 내의 Vuex getter에서 업데이트된 값을 얻는 방법

컴포넌트 템플릿 내의 Vuex getter에서 업데이트된 값을 얻는 방법

템플릿 내의 getter 값의 변화를 검출하려면 어떻게 해야 합니까?다음과 같은 컴포넌트가 있습니다.

  computed: {
    ...mapGetters({
      processingStep: 'products/processingStep',
    }),

<div class="col" v-if="processingStep !=='last'">
...
...
</div>

따라서 vuex 상태 버튼을 클릭하면 processingStep 값이 그 사이에 변경됩니다.문제는 Vue dev 툴 내에 업데이트된 getter 값이 표시되지만 컴포넌트넷템플릿에서 이를 추적하지 않는다는 것입니다.이를 수정하려면 어떻게 해야 하며 위의 div는 processingStep 값 변경에 대해 어떻게 인식해야 합니까?

당신은 당신의 가게의 돌연변이를 구독할 수 있어야 합니다.구독은 기본적으로 스토어에서 변환이 호출될 때마다 이벤트 청취자를 만드는 것과 같습니다.예를 들어 다음과 같은 경우processingStep값은 라고 불리는 돌연변이에 의해 변화한다.setProcessingStep:

export default {
  data() {
    return {
      processingStep: null
    }
  },
  mounted() {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'setProcessingStep') {
        this.processingStep = state.processingStep
      }
    })
  }
}

이것은, 이 동작의 기본적인 예입니다.난 네 계획을 비웃으려고 했어.다음은 Getter가 DOM의 vue v-if를 변경할 때 반응하는 예를 보여 줍니다.

이 예는 코드 내에서 발생할 수 있는 오류를 찾는 데 도움이 될 수 있습니다.

vuex를 getter와 함께 사용하는 올바른 방법이기 때문에 워처를 사용하여 예를 추가하지 않습니다.감시자를 사용하는 것은 실제 문제를 피하는 것이며 나쁜 관행으로 간주될 것입니다.

또한 앱의 vue reactivity가 깨졌을 수도 있습니다.vuex 문서를 보면 다음과 같습니다.Vue의 대응 규칙 및 Vue 변경 감지 주의 사항을 따르는 돌연변이

이는 기본적으로 Vue가 특정 방법으로 수행된 개체 및 어레이에 적용된 변경을 감지할 수 없음을 의미합니다.

객체의 경우:일반적으로 초기화 시 존재하지 않았던 외부 키를 추가하는 경우

어레이의 경우:인덱스로 항목을 직접 설정하거나 길이를 변경할 때

Vue.use(Vuex);
const store = new Vuex.Store({
  modules: {
    products: {
      strict: true,
      namespaced: true,
      state: {
        step: 'first'
      },
      getters: {
        processingStep(state) {
          return state.step;
        }
      },
      mutations: {
        CHANGE_STEP(state) {
          state.step = 'last'
        }
      }
    }
  }
});

const demo = new Vue({
  el: '#demo',
  store: store,
  computed: {
    ...Vuex.mapGetters({
      processingStep: 'products/processingStep'
    })
  },
  methods: {
    changeStep() {
      this.$store.commit('products/CHANGE_STEP')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<div id="demo">
  <p>processingStep: {{ processingStep }}</p>
  <button @click="changeStep">change Step</button>
  <div class="col" v-if="processingStep !=='last'">
    First step! :D
  </div>
  <p v-else-if="processingStep !== 'first'">
    This is the last..
  </p>
</div>

언급URL : https://stackoverflow.com/questions/63738533/how-to-get-updated-value-from-vuex-getter-inside-component-template