[Vue] Pinia Store 에서 vue-router 사용하기

개요

---

• pinia store 에서 vue-router 사용 시 undefined 로 인해 정상적인 동작을 하지않는 상황이 발생
• 사실 이건 당연한, 간단한 구조적 문제였는데.. 저와 같은 실수를 하는 사람이 없길 바라며 작성하는 게시글입니다..

 

개발 환경

---

• build tool: vite
• framework: vue3
• state management: pinia

 

코드

---

• main.js

    import { createApp } from 'vue'
    import { createPinia } from 'pinia'
  
    import App from './App.vue'
    import router from './router'
  
    const app = createApp(App)
  
    app.use(createPinia())
    app.use(router)
  
    app.mount('#app')
  

 

• stores/common.js

    import { defineStore } from 'pinia'
    import { ref, computed } from 'vue'
    import { useRouter } from 'vue-router'
  
    const router = useRouter()
  
    const someVar = ref('')
  
    ...
  
    function goPage() {
      router.push('/next')
    }
  
    ...
  
    export const useCommonStore = defineStore('common', () => {
      return {
        someVar,
  
        ...
  
      }
    })

• 위와 같이 작성 시 goPage() 를 호출하면 아래와 같은 오류가 발생한다.

  common.js?t=1696379954131:8 Uncaught TypeError: Cannot read properties of undefined (reading 'push')

그리고 console.log(router) 로 router 를 확인하면 undefined 를 확인할 수 있다.

 

원인과 해결

---

• 문제의 원인은 당연하게도 호출시점 이다. vue-router 를 참조선언 한 후 사용하려면 setup 함수 내에서 선언 후 사용해야 하는데 위 소스는 그렇지 않다.
  위 stores/common.js 소스는 Vue3 script definition 방식 중 하나인 Composition API 사용법에서도 setup function (<script setup>) 방식과 유사하게 작성된 것인데 정상동작을 하기 위해서는 두 가지 방법이 있다.

  하나는 문제의 원인에 명시 된 것 처럼 setup 함수 내에 선언하여 사용하는 것 이고 다른 하나는 router 가 필요한 함수에서 생성하여 사용 하는 방법이다.

 

setup 함수 내 선언

setup 함수 내 선언하여 사용하는 방법 (defineStore 함수의 두번째인자가 storeSetup 속성이다)

    // common.js
    import { defineStore } from 'pinia'
    import { ref, computed } from 'vue'
    import { useRouter } from 'vue-router'

     ...

     const router = ref(null)

     ...

     function goPage() {
       router.value.push('/next')
     }
     export const useCommonStore = defineStore('common', () => {
       router.value = useRouter()
         return {
            someVar,
            ...
         }
      })

 

개별 함수 내 선언

호출이 필요한 함수 내에서 별도로 생성하여 사용하는 방법

    // common.js
    import { defineStore } from 'pinia'
    import { ref, computed } from 'vue'
    import { useRouter } from 'vue-router'

    const someVar = ref('')

    ...

    function goPage() {
      // goPage 함수 내에서 선언
      const router = useRouter()
      router.push('/go_next')
    }

    ...

    export const useCommonStore = defineStore('common', () => {
      return {
        someVar,

        ...
      }
    })