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로 불러올 수 있습니다.
'Frontend > vue3' 카테고리의 다른 글
[vue3] v-for, v-if 같이 사용(computed/watch) (0) | 2023.04.19 |
---|---|
[Vue] 자식 컴포넌트 데이터 가져오기(ref) (0) | 2023.04.18 |
Vue3 상태 관리 (Pinia, Vuex) (0) | 2023.04.17 |
[Vue3] 컴포넌트 동적 로드와 내용 교체: component 와 :is, defineAsyncComponent 활용 (1) | 2023.04.14 |
[Vue3] setup()와 methods() (0) | 2023.04.09 |