如何在Vue根组件中正确使用Pinia Store？报错排查与解决

相关代码 #

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

问题原因 #

错误指向user.ts第9行，说明你在模块加载阶段（也就是useUser被导入时）就直接调用了useUser()或者执行了依赖Pinia实例的store操作。此时main.ts里的app.use(createPinia())还未完成初始化，Pinia还没绑定到Vue应用上，自然找不到活跃的Pinia实例。

你的App.vue写法没问题（在onMounted钩子内调用useUser），问题出在user.ts本身的顶层代码。

修复方案 #

修改user.ts，移除模块顶层的store调用 #

打开@/stores/user.ts，检查是否存在类似以下的错误写法：

// 错误示例：模块顶层直接调用useUser并执行方法
import { defineStore } from 'pinia'

export const useUser = defineStore('user', {
  state: () => ({ /* ... */ }),
  actions: {
    signInSilent() { /* ... */ }
  }
})

// 这里是错误根源：模块加载时就实例化store并执行操作，此时Pinia未初始化
const userStore = useUser()
userStore.someAction()

改成正确写法：只定义store，所有store的实例化和操作都放到组件钩子、路由守卫等Pinia初始化完成后的场景中：

import { defineStore } from 'pinia'

export const useUser = defineStore('user', {
  state: () => ({ /* ... */ }),
  actions: {
    signInSilent() { /* ... */ }
  }
})

// 不要在模块顶层执行任何需要实例化store的代码

修改后，App.vue中onMounted内的调用就能正常获取到活跃的Pinia实例，错误会消失。

内容的提问来源于stack exchange，提问作者Simao Gomes Viana