typescript - Bagaimana cara menggunakan store Pinia dengan benar di komponen root vue?

Main.ts saya:

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

Dan saya mencoba menggunakan store di 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>

Tapi saya mendapatkan kesalahan berikut:

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

Saya tidak mengerti ini. Bahkan dengan setActivePinia itu masih tidak bekerja. Dan aplikasi dipasang di akhir main.ts. Jadi mengapa ini tidak bekerja dan bagaimana saya bisa memperbaikinya?

Jawaban #1

Masalah ini berkaitan dengan hal lain, yang tidak terkait dengan App.vue itu sendiri.

Di toko pengguna saya sedang menggunakan toko lain:

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

const errors = useErrors()

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

Masalahnya adalah bahwa const errors=useErrors() berada di tingkat root dan dengan demikian sudah dijalankan saat impor, yang terjadi sebelum apa pun dijalankan di App.vue dan karena main.ts mengimpor App.vue, itu juga dijalankan sebelum apa pun di main.ts dijalankan dan dengan demikian menyebabkan kesalahan.

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

Dan useErrors() akan dijalankan sebelum app.use(createPinia()). Jadi untuk mengatasi ini, pindahkan baris tersebut ke dalam store:

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

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

Jawaban #2

Sepertinya mungkin ada kesalahpahaman; setActivePinia tidak diperlukan untuk menggunakan Pinia dalam aplikasi Anda, itu digunakan untuk pengujian. app.use(pinia) akan menempelkan instance Pinia Anda ke aplikasi Anda. Cukup menghapus baris setActivePinia(pinia) seharusnya mencapai apa yang Anda inginkan