이 Vue 계산 속성이 반응하지 않는 이유는 무엇입니까?

이 Vue 계산 속성이 반응하지 않는 이유는 무엇입니까?

전달된 ID를 소품으로 사용하여 스토어에서 객체의 속성을 조회하고 싶습니다.저장소의 개체가 비동기적으로 표시되므로 개체가 바로 표시되지 않을 수 있습니다.나는 그 물체의 최종적인 모양에 반응하도록 보기를 원한다.

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['id'],
  computed: {
    widget () {
      let path = `widget/${this.id}`
      return this.$store.state.widgets[path]
    },
    title () {
      let widget = this.widget
      return (widget) ? widget.data().fullName : 'nothing to see here'
    }
  }
}
</script>

vuex 디버깅툴을 사용하여 저장 위젯 오브젝트가 비어 있는 상태로 시작되고 다음으로 설정되는 것을 확인할 수 있습니다.widgets: { 'widgets/someId': { ... } }그런데 거스름돈을 받지 못한 것 같아요.제목은 == 'nothing...'으로 유지됩니다.

이런 방법을 만들어봤는데 똑같은 행동을 해요.또, 통째로 교환해 보았습니다.widgets한 번에 하나의 소품(필수사항이라고 생각합니다)이 아니라, 가게에 물건을 올려놓았지만, 여전히 운이 없습니다.

제 질문은 이것과 매우 비슷하다고 생각합니다만, 답은 너무 간결합니다."데이터 항목 사용"이라고만 표시되어 있지만, 데이터 항목이 무엇인지, 어떻게 사용하는지(또는 이로 인해 vue가 반응하는 이유)는 잘 모르겠습니다.

Vue의 반응성 규칙을 따르는 돌연변이

Vue의 변경 감지 경고에 위배되는 것을 보고 있습니다.

Vue가 속성 추가 또는 삭제를 감지할 수 없습니다.

Vuex에서도 멤버를 추가하거나 삭제할 때 사용해야 합니다.

위젯이 반응하지 않을 가능성이 높습니다.widget그 자체도 변하지 않고widget.data당신이 정의하는 함수이기 때문입니다.Vue는 다음과 같은 경우 데이터 변경을 "확인"하지 않습니다.data함수이기 때문에 호출됩니다.

위젯을 비활성화하는 방법은 여러 가지가 있습니다.하나는 데이터를 미리 계산하고 함수 없이 개체를 반환하는 것입니다.대부분의 위젯에 데이터가 필요하지 않더라도 위젯이 많을 경우 성능이 저하될 수 있습니다.

다른 하나는 잠재적으로 비교적 새로운 getter 함수/방법을 사용하는 것입니다.데이터를 입수하려면widget.data그런 위젯이 있어요

{
  id: 1,
  get data() {
    // Whatever was in your function before
  }
}

이것은 Ecmascript 6 기능이기 때문에 관련된 모든 브라우저와 호환성을 가지려면 babel을 통해 실행해야 합니다.

언급URL : https://stackoverflow.com/questions/54715544/why-is-this-vue-computed-property-not-reactive