Vue 상태관리 Pinia, Options API VS Composition API

Options API	Composition API
// /src/stores/파일Opt1.js // Options Store import { defineStore } from 'pinia'; // Options 나 Composition API 인 .vue 모두 에서 사용 가능 export const use파일Opt1Store = defineStore('파일Opt1', {   state() { // 데이터 정의. 반응형. Setup Store 에서 ref() 와 reactive() 사용해야 함     return {       bar1: 값,     };   },   getters: { // 반응형. Setup Store 에서 computed() 사용해야 함     foo11(state) { // 필요시 state 인자로 사용       ... state.bar1 ... // state. 사용       return ...;     },     foo12(param) {       ... this.foo11 ... // this. 사용       return ...;     },   },   actions: { // 반응형이 아니라 일반적인 함수     foo13() {       ... this.foo11 ...     },     foo14(param) {       ... this.foo12(...) ...       ... this.foo13() ...     },   }, });	// /src/stores/파일Set2.js // Setup Store import { ref, computed } from 'vue'; import { defineStore } from 'pinia'; // Options 나 Composition API 인 .vue 모두 에서 사용 가능 export const use파일Set2Store = defineStore('파일Set2', () => {   const bar2 = ref(값); // reactive() 가능   const foo21 = computed(() => bar2.value ...);   const foo22 = computed((param) => foo21.value ...);   const foo23 = () => { ... bar2.value ... } // 일반 함수   const foo24 = (param) => { // 일반 함수     ... bar2.value ... // 변수이므로 .value 사용     ... foo21.value ... // computed 된 변수이므로 .value 사용     ... foo23() ... // 함수이므로 .value 불필요   };   return { // store 를 사용하는 .vue 에서 인식. Composition API 가 아니라는 증거     bar2,     foo21, foo22, foo23, foo24,   }; });
// /src/views/파일2.vue <script> import { mapState, mapActions } from 'pinia'; import { use파일Opt1Store } from '@/stores/파일Opt1'; import { use파일Set2Store } from '@/stores/파일Set2'; export default {   computed: {     ...mapState(use파일Opt1Store, ['bar1', 'foo11', ...]),     ...mapState(use파일Set2Store, {       varBar2: 'bar2',       varFoo21: 'foo21',       ...     }),   },   methods() {     ...mapActions(use파일Opt1Store, ['foo13', 'foo14', ...]),     ...mapActions(use파일Set2Store, {       fncFoo23: 'foo23',       fncFoo24: 'foo24', ...     }),     foo() { // foo: function() {       ... this.bar1 ... // this.foo11. store 명칭 그대로 사용       ... this.varBar2 ... // this.varFoo21. 새로운 명칭 사용       ... this.foo13() ...       ... this.foo23() ...     },   }, } </script>	// /src/views/파일2.vue <script setup> import { storeToRefs } from 'pinia'; // 비구조화 할당 import { use파일Opt1Store } from '@/stores/파일Opt1'; import { use파일Set2Store } from '@/stores/파일Set2'; const opt1Store = use파일Opt1Store(); const set2Store = use파일Set2Store(); ... opt1Store.bar1 ... ... set2Store.bar2 ... ... opt1Store.foo13() ... ... set2Store.foo23() ... // 반응형 유지 위해 비구조화 할당시 storeToRefs() 사용 const { bar1, foo11 } = storeToRefs(opt1Store); const { bar2, foo21 } = storeToRefs(set2Store); </script>