Vuex 저장소 개체에서 계산된 속성이 업데이트되지 않음

Vuex 저장소 개체에서 계산된 속성이 업데이트되지 않음

클래스 바인딩 스테이트먼트가 많이 있습니다.

:class="{active: isActive('status', status.id)}"

위의 방법은 다음과 같습니다.

isActive: function (param, value) {
    if (!this.activeFilters.hasOwnProperty(param) && value === 'all' && param !== 'type') {
        return true;
    }
...etc
}

...그리고 이 메서드에서 보고 있는 계산 속성:

activeFilters() {
    return this.$store.state.activeFilters;
},

Vuex 상태에 있습니다.

문제는 위의 클래스 바인딩이 있는 드롭다운 중 하나를 클릭해도 이러한 속성이 업데이트되지 않는다는 것입니다.다른 루트로 이동했다가 돌아가면 액티브클래스는 정상적으로 적용됩니다.클래스가 즉시 적용되도록 계산된 속성을 강제로 재계산할 수 있습니까?

속성을 추가하면 반응성이 발생하지 않는 것은 이해하지만, 이에 따라 오브젝트를 새로운 것으로 교체하면 반응성이 유지되어야 합니다.제가 하는 일은 다음과 같습니다.

state.activeFilters = query;

...물건을 제거한다.나는 당황했다.

JavaScript의 제한으로 인해 Vue가 어레이 및 개체에서 감지할 수 없는 변경 유형이 있습니다.자세한 것은, https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 를 참조해 주세요.

간단한 솔루션 중 하나는 계산된 속성에서 메서드를 만드는 것입니다.

이전:

<Grid v-for="i in items" :items="items" />

<script>
  export default Vue.extend({
    .
    .
    .
    computed: {
      items() {
        return this.storedItems
      },
    }
  }
</script>

그 후:

<Grid v-for="i in items" :items="items" />

<script>
  export default Vue.extend({
    .
    .
    .
    methods: {
      items() {
        return this.storedItems
      },
    }
  }
</script>

알아냈어.기능 후 컴포넌트를 강제로 다시 렌더링하려면 다음과 같이 해야 합니다.

this.$forceUpdate();

언급URL : https://stackoverflow.com/questions/40513389/computed-property-not-updating-from-vuex-store-object