계산된 속성을 효과적으로 사용하는 Vue

계산된 속성을 효과적으로 사용하는 Vue

제 계산 자산에는 아래 코드가 있습니다.기능이 매우 복잡해질 것으로 예상됩니다.여기에 다 있는 게 맞나요?스토어 파일에 넣고 싶은데 계산된 속성 내에서 함수를 이름으로 호출할 수 없습니다.조언 좀 해주시겠어요?

computed: {
  assignValue() {
    this.valueToSet = this.value1;
    
    if (this.valueToSet < 10) {
      return "1 week"
    } else if (this.valueToSet < 20) {
      return "2 weeks"
    } else if (this.valueToSet < 30) {
      return "3 weeks"
    } else {
      return 0;
    }
  }
}

요약하자면, my store.js(vuex)에 두고 싶은데, "computer property" 안에 있는 함수를 이름으로 호출/트리거하려면 어떻게 해야 하나요?

만약 그것이 가능하지 않다면, 효과적인 대안이 있나요?아니면 이대로 계속해야 하나요?

Vuex 자체에는 문서에 표시된 대로 Vue 구성 요소의 계산된 속성과 함께 사용할 수 있는 getter 속성이 있습니다.

코드에 관한 한 현재 접근법에는 문제가 없습니다.여러 구성 요소에서 해당 상태를 다시 사용해야 하는 경우 이 코드를 Vuex getter로 이동해야 합니다.

코드의 유일한 문제는this.valueToSet = this.value1;계산된 속성은 (할당 포함) 부작용을 일으키지 않아야 한다.직접적인 피해는 없지만 계산된 값이 캐시될 때 내부적으로 의도하지 않은 결과를 초래할 수 있습니다.이 부품이 아직 필요한 경우 -this.valueToSet = this.value1;- 다른 계산된 속성으로 이동하거나 watch 식을 사용합니다.

언급URL : https://stackoverflow.com/questions/67329038/vue-effectively-using-computed-property