useStore

• 앞서 포스팅한 vue-router의 useRouter, useRoute 처럼 vuex의 useStore composable한 함수가 존재한다.

import { useStore } from 'vuex'

const store = useStore();
const inc = () => {
  store.dispatch('increment');
}

• 컴포넌트에서 useStore를 호출하면 이 애플리케이션에 연결되어 있는 Vuex 저장소에 액세스할 수 있다.

main.js의 끝단

computed를 반드시 사용할 것.

• 이 store에서도 router와 마찬가지로 마크업에 어떠한 값을 반영하고 싶다면 computed 메서드를 반드시 사용해줘야한다.

<template>
  <h2>{{ counter }}</h2>
</template>

<script setup>
import {useStore} from "vuex";
import {computed} from "vue";

const store = useStore();
const counter = computed(()=>store.getters['counter']);
</script>

• const counter는 computed를 호출하여 연산 값으로 지정하고 computed에는 의존성이 변경될 때마다 실행될 함수를 제공한다.
  const counter가 변경될 때마다 Vue는 이를 감지하고 연산 값을 다시 계산한 다음에 템플릿에 다시 계산된 값을 나타낸다.

• computed 값은 ref이기 때문에 카운터가 변경될 때마다 Vue가 이를 감지하고 카운터를 사용하는 위치에 템플릿을 업데이트한다.

composition API 1장 요약

1. Options API의 대안일 뿐이며 함께 짬뽕으로 사용해도 된다.
2. 데이터는 반드시 ref, reactive 메서드로 감싸야 우리 의도대로 반응형으로 동작하며 ref, reactive 메서드로 감싼 값의 속성값은 그냥 값이지 Proxy한 값이 아니다.
3. 메서드는 그냥 선언하면 되고 연산, 감시의 함수들은 imported된 함수이다.
4. setup 메서드는 vue life-cycle의 created에 해당되며 선천적으로 2개의 인수(props, context)를 갖고있다.