TypeScript - ルート Vue コンポーネントで Pinia ストアを正しく使用する方法は？

私の 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()) の前に実行されます。これを解決するには、この行をストアの中に移動してください:

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) の行を削除するだけで、望む結果を達成できるはずです