Composeable을 사용하여 Nuxt 3에서 Pinia 스토어를 호출하는 방법 알아보기
P粉418351692
2023-08-26 09:34:11
<p>nuxt 3.4.0 업데이트부터 pinia store를 컴포저블에서 사용할 수 없습니다. </p>
<pre class="brush:php;toolbar:false;">//구성 가능한 예시
import { useAuthStore } from '~/store/auth-store';
const authStore = useAuthStore();
내보내기 함수 doSomethingWithStore() {
authStore.checkAuthUser를 반환합니다.
}</pre>
<p>다음 오류가 표시됩니다</p>
<pre class="brush:php;toolbar:false;">getActivePinia가 활성 Pinia 없이 호출되었습니다. pinia 설치를 잊으셨습니까? const pinia = createPinia() app.use(pinia) 이는 프로덕션에서 실패합니다. </pre>
<p>Stackblitz 예시 보기
https://stackblitz.com/edit/broken-pinia-store-in-composeables?file=composables%2FthisBreaks.js,nuxt.config.ts</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
으아악nuxt.config.ts中错误地安装了 @pinia/nuxt 模块。在 Nuxt 3 中，buildModules属性已经不存在了，您需要使用modules에서 교체합니다(TypeScript 오류로 알 수 있음):두 번째 요점은 결합자 함수 내에서
으아악useAuthStore도 호출해야 한다는 것입니다. 그렇지 않으면 pinia가 실제로 로드되기 전에 저장소 로드를 시도합니다. 결합기 기능을 사용할 때가 아니라 파일을 가져올 때 호출됩니다.이 작업을 참고하세요 stackblitz
이는
const authStore = useAuthStore();함수 외부에서 선언하는 것이 애플리케이션 시작의 초기 단계에서 그리고 Pinia 인스턴스가 Vue 인스턴스 내에서 적절하게 초기화되기 전에 호출되기 때문입니다.이것은 작동합니다:
으아악피니아에게 전화를 거는 것이 안전한 장소(전체 목록이 아닐 수도 있음):
<script setup><template>섹션defineNuxtMiddleware