typescript - Cum să folosești corect magazinul Pinia în componenta rădăcină Vue?

Fișierul meu 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')

Și încerc să folosesc un magazin în 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>

Dar primesc următoarea eroare:

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

Nu înțeleg asta. Chiar și cu setActivePinia tot nu funcționează. Și aplicația este montată la sfârșitul main.ts. Deci de ce nu funcționează și cum pot să repar asta?

Răspuns #1

Problema are de-a face cu altceva, nerelevant pentru App.vue în sine.

În magazinul utilizatorului foloseam un alt magazin:

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

const errors = useErrors()

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

Problema este că const errors=useErrors() se află la nivel rădăcină și, prin urmare, este deja executată la timpul de import, care este înainte ca orice altceva să ruleze în App.vue, și deoarece main.ts importă App.vue, aceasta rulează de asemenea înainte ca orice din main.ts să ruleze și astfel cauzează eroarea.

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

Și useErrors() ar rula înainte de app.use(createPinia()). Așadar, pentru a rezolva acest lucru, mutați linia în interiorul magazinului:

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

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

Răspunsul #2

Se pare că ar putea exista o neînțelegere; setActivePinia nu este necesar pentru a folosi Pinia în aplicația ta, este folosit pentru testare. app.use(pinia) va atașa instanța ta Pinia la aplicație. Simplul fapt de a elimina linia setActivePinia(pinia) ar trebui să realizeze ceea ce dorești.