Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia.

 

개발환경 : Vue.js, vscode

 

개요와 해결

---

 

https://github.com/ViewGorithm/viewgorithm-frontend

GitHub - ViewGorithm/viewgorithm-frontend: viewgorithm FrontEnd

 

Viewgorithm 프로젝트를 진행하는 도중에 다음과 같은 에러가 발생했다.

 

Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.
at useStore (pinia.js?v=c271ab60:1354:13)
at axios.auth.js:15:14
useStore @ pinia.js?v=c271ab60:1354
(anonymous) @ axios.auth.js:15

 

Pinia는 현재(2024년) Vue.js에서 상태관리 라이브러리로 거의 필수이다시피 사용한다.

https://pinia.vuejs.org/getting-started.html

Pinia | The intuitive store for Vue.js

 

처음 사용 시에 사용법을 세세히 이해하지 못해 다큐먼트를 뒤져가며 사용법을 익혔다.

하지만 역시 경험이 부족해서 이런저런 실수가 잦았고 위의 에러도 보게 됐다.

 

pinia 객체를 초기화하는 코드가 중복돼서 나타나는 에러다!

 

해결은 아래와 같다.

 

main.js

const app = createApp(App)

app.use(createPinia().use(piniaPersist)) 

const auth = userAuth();

 

main.js에서 객체를 초기화한다.

 

export default {
  name: 'Login',
  setup() {
    const ID = ref('')
    const password = ref('')
    const auth = userAuth()
    function workginLogin() {
      login(ID.value, password.value).then(() => {
          auth.setLoggedIn(true)
        })
    }

    return {
      ID,
      password,
      workginLogin
    }
  }
}

 

쓰임은 위와 같이.