[vue.js] Computed 속성과 사용방법

상황

store vuex를 사용해 API 응답값을 컴포넌트에서 확인해보고싶을때!
getters 바인딩을 통해 확인가능했다. actions는 오류나는 상황 X0

?_?

왜 getters는 computed, actions methods에 정의할까

예시

//template
<span>JUST 값 확인: {{ productList }}</span>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  async fetch () {
    await this.getProductList({})
  },
  computed: {
    ...mapGetters('product', [
      'productList',
    ]),
  },
  methods: {
    ...mapActions('product', [
      'getProductList',
    ]),
  },

computed 속성/사용법

1. computed는 캐싱(저장)을 한다. 그래서 반응형 데이터인 경우 computed를 사용한다.
   computed properties are cached based on their reactive dependencies

• computed속성은 반응형 종속성에 기반하여 캐시가 된다.
  - 값을 저장, 변경되는 시점을 캐치해서 변경한 후 캐시로 저장

2. computed속성은 기본적으로 getter이지만, setter도 제공 가능

• computed는 데이터 바인딩 할 수 있다. (테스트/이해 좋음)

3. 매개변수를 사용할 수 없다.

methods와 비교할때

1. 메서드 호출은 다시 렌더링이 발생할 때마다 항상 함수를 실행 (캐싱을 원하지 않으면 methods를 사용)
2. 매개변수를 사용할 수 있다.

참고

https://v3.ko.vuejs.org/guide/computed.html#%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6