'script setup' 방식으로 상태관리 index.js 파일 사용하기

< 개발 환경, 문제 발단 배경 >

내가 현재 하고있는 프로젝트에서는

src>store>index.js 파일 안에서 상태관리를 사용하고 있다.

(프로젝트 생성시 자동 생성)

또한, 작업하고 있는 파일인 main.vue 안에서는

'script setup' 방식을 사용하고 있었다.

사실 나는 옵션 API 방식으로 javascript 코드를 작성하는 것을 좋아하는데,

친구가 기능 구현 하다가 잘 안되어서 나에게 부탁한 main.vue 파일에서는

script setup 방식을 사용하고 있었다.

잠깐, 여기서 javascript의 'script setup' 과 '옵션 API 스타일' 방식에 대해서

가볍게 살펴보고 문제 상황을 살펴보고자 한다.

1. 'script setup' 방식

말그대로 <script setup> 코드 안에서 javascript를 기술하는 것이다.

const를 사용하여 변수를 생성하거나 데이터를 다룬다.

장점으로는, 간결한 문법으로 컴포넌트 구성을 단순화 할 수 있으며 의도가 더 명확해진다는 특징이 있다.

단점으로는, 'this'를 통해 컴포넌트 인스턴스에 접근할 수 없으므로 일부 Vue 옵션을 사용하기가 어려울 수 있다.

('script setup'방식 예시)

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`컴포넌트가 마운트 됐습니다.`)
})
</script>

2. '옵션 API' 방식

export default {} 를 사용하는 방식이다.

장점으로는, 'this'를 통해서 컴포넌트 인스턴스를 접근할 수 있으며,

내 기준에서는 앞서 설명한 'script setup'방식보다 코드가 더 간결해지는 것 같다.

단점으로는, 더 많은 코드를 작성할 때 코드가 많이 길어질 수 있다.

(예시)

<script>
import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(function() {
      console.log('onMounted가 호출 되었습니다:', this)
    })
  },

  mounted() {
    console.log('mounted()가 호출 되었습니다:', this)
  }
}
</script>

그래서, 친구의 스타일을 최대한 유지하고자

main.vue 파일 안에서 'script setup' 방식을 그대로 유지하였다.

< 문제 상황 >

나는 main.vue에서 index.js 파일을 활용하고자

(script setup 방식 채택 + store 파일 직접 import)

import { store } from '@/store';

하지만, 이 방식으로는 어떤 방법을 써서라도 내가 작성해놓은 store>index.js를 활용할 수 없었다.

옵션 API 방식으로도 코드를 고쳐보고 .. 했지만

에러만 잔뜩 떴다...(삽질만 2시간)

<해결 방안 >

직접 파일을 꺼내서 쓰려고 하는것보다,

파일의 근원지인 vue router와 vue store를 직접 사용하면 된다!!!

vue-router와 vuex에서

useRouter와 useStore를 import 해줌과 동시에,

saveRoutineId 라는 함수에서 store.commit을 사용하였다.

( scr>store>index.js에서 내가 따로 작성해놓은 mutation 함수를 사용하기 위함)

//import { store } from '@/store';	// 사용 X
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const saveRoutineId = async (routine) => {
    try {
        const routineId = routine.routine;
        store.commit('setChosenRoutineId', routineId);  // -----> 상태관리 mutation 사용
    } catch (error) {
        console.error('Error occurred while saving routine ID:', error);
        throw error;
    }
}

삽질을 엄청많이 했지만,

vue-router와 vuex가 역시 메인이고 중요하다는 것을 다시 한 번 깨달았다.

vue-router를 통해 index.js와 main.vue 간의 페이지를 연결하고(라우팅),

vuex를 통해 상태관리를 이용해주면 된다.

역시 기본을 충실히 해야 코딩이 원활해짐을

다시 한 번 깨닫는 계기가 되었다.

< 개발 환경, 문제 발단 배경 >

< 문제 상황 >

<해결 방안 >

티스토리툴바