Nuxt3中app.vue根组件无法使用Pinia store的问题求助

问题描述 #

在Nuxt3的app.vue根组件中调用Pinia store时触发500错误，报错信息如下：

[🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

解决方案 #

1. 移除手动导入，使用Nuxt自动导入 #

修改app.vue中的<script setup>部分，删除手动导入useAppStore的语句，直接调用useAppStore()即可：

修改后的app.vue代码：

<template>
  <div :is-dark-mode="appStore.isDarkMode" >
    <NuxtWelcome />
  </div>
</template>

<script setup lang="ts">
const appStore = useAppStore()
</script>

2. 保持现有配置不变 #

你的nuxt.config.ts和stores/app.ts配置已经正确：

• nuxt.config.ts中已添加@pinia/nuxt模块
• stores/app.ts的store定义符合Pinia规范

原因说明 #

@pinia/nuxt模块已经为Nuxt3配置了Pinia的自动导入功能，手动导入useAppStore会跳过Nuxt的Pinia初始化流程，导致在Pinia实例未激活时就调用了store，从而触发错误。使用自动导入时，Nuxt会确保Pinia实例完全初始化后再执行store调用。

内容的提问来源于stack exchange，提问作者p_duthoit