pinia로 store 전환

https://pinia.vuejs.kr/

Getter와 computed

Getter는 Store의 state에 대한 계산형 값과 정확히 동일
https://ko.vuejs.org/guide/essentials/computed

1. 계산된 캐싱 vs 메서드​

표현식에서 메서드를 호출하여 동일한 결과를 얻을 수도 있습니다:

template
<p>{{ calculateBooksMessage() }}</p>
js
// 컴포넌트 내에서
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

계산된 속성 대신 메서드로 동일한 기능을 정의할 수 있습니다. 결과적으로 두 가지 접근 방식은 실제로 완전히 동일합니다. 그러나 차이점은 계산된 속성은 의존된 반응형을 기반으로 캐시된다는 점입니다. 계산된 속성은 의존된 반응형 중 일부가 변경된 경우에만 재평가됩니다. 즉, author.books가 변경되지 않은 한 여러 곳에서 publishedBooksMessage에 접근할 경우, getter 함수를 다시 실행하지 않고 이전에 계산된 결과를 즉시 반환합니다.

아래 예제는 Date.now()가 반응형으로써 의존된 것이 아니기 때문에 이후 계산된 속성이 업데이트되지 않음을 의미합니다:

js

const now = computed(() => Date.now())

이와 반대로 메서드 호출은 리렌더링이 발생할 때마다 항상 함수를 실행합니다.

캐싱이 필요한 이유는 무엇일까요? 거대한 배열을 루프 하며 많은 계산을 해야 하는 값비싼 비용의 list 속성이 있다고 가정해봅시다. 그리고 list에 의존하는 또 다른 계산된 속성이 있을 수 있습니다. 캐싱이 없다면 우리는 list의 getter를 불필요하게 많이 실행할 것입니다! 캐싱을 원하지 않는 경우에만 메서드 호출을 사용하십시오.

2. getter에서 사이드 이펙트는 금물​

계산된 getter 함수는 순수한 계산만을 수행하고 부작용이 없어야 한다는 것을 기억하는 것이 중요합니다. 예를 들어, 계산된 getter 안에서 다른 상태를 변형시키거나, 비동기 요청을 하거나, DOM을 변경하는 행위는 하지 마세요! 계산된 속성은 다른 값들을 기반으로 값을 파생시키는 방법을 선언적으로 설명하는 것으로 생각해야 합니다 - 그것의 유일한 책임은 그 값을 계산하고 반환하는 것입니다. 가이드에서 나중에 우리는 상태 변화에 대한 반응으로 부작용을 수행하는 방법에 대해 watchers를 사용하여 논의할 것입니다.

Actions (액션)

Actions는 컴포넌트의 메서드와 동일합니다.
Getters와 달리 actions는 비동기적일 수 있으며, actions 내부에서 API 호출이나 다른 actions를 await할 수 있습니다!