typescript - איך להשתמש נכון בחנות Pinia ברכיב השורש של Vue?

main.ts שלי:

import './assets/tailwind.css'
import './assets/wordpress.css'

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')

ואני מנסה להשתמש בחנות ב-App.vue:

<script setup lang="ts">
import NavigationBar from '@/components/navigation/NavigationBar.vue'
import TopBar from '@/components/header/TopBar.vue'
import NavigationDrawer from '@/components/navigation/NavigationDrawer.vue'
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ErrorSnackbar from '@/components/ErrorSnackbar.vue'
import { useUser } from '@/stores/user'

const router = useRouter();
const route = useRoute()

onMounted(() => {
  const user = useUser()
  user.signInSilent()
});
</script>

אבל אני מקבל את השגיאה הבאה:

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.
    useStore pinia.mjs:1709
    <anonymous> user.ts:9
pinia.mjs:1709:18
    useStore pinia.mjs:1709
    <anonymous> user.ts:9

אני לא מבין את זה. אפילו עם setActivePinia זה עדיין לא עובד. והאפליקציה מותקנת בסוף main.ts. אז למה זה לא עובד ואיך אני יכול לתקן את זה?

תשובה #1

הבעיה קשורה למשהו אחר, שאינו קשור ל-App.vue עצמו.

בחנות המשתמש השתמשתי בחנות אחרת:

import { defineStore } from 'pinia'
import { useErrors } from '@/stores/errors'

const errors = useErrors()

export const useUser = defineStore('user', () => {
  const currentLoginToken = ref<string | null>(null)
  // ...
})

הבעיה היא ש-const errors=useErrors() נמצא ברמת השורש ולכן כבר מתבצע בזמן הייבוא, שזה לפני שהכל אחר רץ ב-App.vue וכיוון ש-main.ts מייבא את App.vue, זה גם רץ לפני שהכל ב-main.ts רץ ובכך גורם לשגיאה.

main.ts ---- imports ----> App.vue ---- imports ----> user.ts ---- uses ----> useErrors()

ו-useErrors() יופעל לפני app.use(createPinia()). לכן, עבור הפתרון הזה, הזז את השורה לתוך ה-store:

import { defineStore } from 'pinia'
import { useErrors } from '@/stores/errors'

export const useUser = defineStore('user', () => {
  const errors = useErrors()
  const currentLoginToken = ref<string | null>(null)
  // ...
})

תשובה #2

נראה כי יתכן שיש אי הבנה; setActivePinia אינו נחוץ כדי להשתמש ב-Pinia באפליקציה שלך, הוא משמש לבדיקה. app.use(pinia) יצרף את מופע ה-Pinia שלך לאפליקציה שלך. הסרה פשוטה של השורה setActivePinia(pinia) צריכה להשיג את מה שאתה רוצה