Composeable을 사용하여 Nuxt 3에서 Pinia 스토어를 호출하는 방법 알아보기

Question

nuxt 3.4.0 업데이트부터 pinia store를 컴포저블에서 사용할 수 없습니다.

//구성 가능한 예시
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();

내보내기 함수 doSomethingWithStore() {
  authStore.checkAuthUser를 반환합니다.
}

다음 오류가 표시됩니다

getActivePinia가 활성 Pinia 없이 호출되었습니다. pinia 설치를 잊으셨습니까? const pinia = createPinia() app.use(pinia) 이는 프로덕션에서 실패합니다. 

Stackblitz 예시 보기 https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts

Answer 1

nuxt.config.ts 中错误地安装了 @pinia/nuxt 模块。在 Nuxt 3 中，buildModules 属性已经不存在了，您需要使用 modules에서 교체합니다(TypeScript 오류로 알 수 있음):

으아악

두 번째 요점은 결합자 함수 내에서 useAuthStore도 호출해야 한다는 것입니다. 그렇지 않으면 pinia가 실제로 로드되기 전에 저장소 로드를 시도합니다. 결합기 기능을 사용할 때가 아니라 파일을 가져올 때 호출됩니다.

으아악

이 작업을 참고하세요 stackblitz

Answer 2

이는 const authStore = useAuthStore(); 함수 외부에서 선언하는 것이 애플리케이션 시작의 초기 단계에서 그리고 Pinia 인스턴스가 Vue 인스턴스 내에서 적절하게 초기화되기 전에 호출되기 때문입니다.

이것은 작동합니다:

으아악

피니아에게 전화를 거는 것이 안전한 장소(전체 목록이 아닐 수도 있음):

• 내부 <script setup>
• 인라인 <template>섹션
• 내부 defineNuxtMiddleware