[Vue3] pinia storeToRefs, mapStores

pinia는 Vue.js 3에서 사용되는 상태 관리 라이브러리로, Vuex와 비슷한 기능을 제공합니다. pinia에서 제공하는 storeToRefs와 mapStores는 pinia를 사용할 때 유용한 도우미 함수들입니다.

storeToRefs(store: Store): object

storeToRefs 함수는 pinia의 Store 객체를 Vue.js 3의 ref 객체로 변환하는 함수입니다. ref는 Vue.js 3의 반응적인(reactive) 데이터를 다루기 위한 객체로, storeToRefs 함수를 사용하면 Store 객체의 상태를 Vue.js 3 컴포넌트에서 ref로 사용할 수 있게 됩니다.

useRuleStore()와 같이 pinia의 useStore() 훅을 사용하여 생성한 Store 객체를 storeToRefs 함수를 사용하여 변환할 수 있습니다

import { useRuleStore } from '@stores/rule';
import { storeToRefs } from 'pinia';

// ...

setup() {
  const rule = useRuleStore();
  return storeToRefs(rule);
}

위와 같이 storeToRefs(rule)를 반환하면, rule 객체의 상태가 ref로 변환되어 Vue.js 3 컴포넌트에서 사용할 수 있게 됩니다.

mapStores(store: Store): object

mapStores 함수는 pinia의 Store 객체를 Vue.js 3 컴포넌트에서 사용하기 쉬운 객체로 매핑하는 함수입니다. mapStores 함수를 사용하면 Store 객체의 상태와 액션을 컴포넌트의 computed 속성으로 매핑하여, 컴포넌트 내에서 간편하게 사용할 수 있는 객체를 생성할 수 있습니다.

다음과 같이 mapStores 함수를 사용하여 useRuleStore() 훅에서 반환된 Store 객체를 컴포넌트에 매핑할 수 있습니다:

import { mapStores } from 'pinia';
import { useRuleStore } from '@stores/rule';

export default {
  name: 'QueryLst',
  computed: {
    ...mapStores(useRuleStore)
  },
  methods:{
  	something() {
    	//this.ruleStore
    }
  }
}

위와 같이 ...mapStores(useRuleStore)를 computed 속성에 정의하면, Store 객체의 상태와 액션을 컴포넌트의 computed 속성으로 매핑하여 사용할 수 있게 되어 컴포넌트 내에서 this.ruleStore로 불러올 수 있습니다.