Vue项目getActivePinia报错无活跃Pinia，求规范解决方案

错误根源 #

你遇到的getActivePinia was called with no active Pinia错误，核心原因是在组件的顶级作用域直接调用了usePokemonStore()。

组件的顶级代码（import语句后立即执行的部分）会在Vue实例（包括Pinia）完成挂载前就运行，此时Pinia还未被注入到组件的上下文环境中，自然找不到活跃的Pinia实例，从而触发报错。

正确实现方式 #

方案1：使用Vue3 Composition API（推荐） #

如果项目基于Vue3，建议用setup语法糖，在setup内部调用useStore——此时Pinia已完成挂载，能正常获取到实例：

<script setup>
import { usePokemonStore } from '../stores/PokemonStore';
import { useRouter } from 'vue-router';

// 在setup内部初始化store，上下文已注入Pinia
const pokemonStore = usePokemonStore();
const router = useRouter();

const evolutions = () => {
  return [
    pokemonStore.evolutionOne,
    pokemonStore.evolutionTwo,
    pokemonStore.evolutionThree,
  ];
};

const resetApp = () => {
  router.push('/');
  pokemonStore.$reset();
};
</script>

方案2：选项式API下的规范写法 #

如果坚持使用选项式API，不要在顶级作用域初始化store，而是在组件生命周期钩子（如created）中获取，或通过this.$pinia手动传入useStore：

<script>
import { usePokemonStore } from '../stores/PokemonStore';

export default {
  name: 'PokemonDetails',
  created() {
    // 组件实例创建后，Pinia已挂载，可通过this.$pinia获取上下文
    this.pokemonStore = usePokemonStore(this.$pinia);
  },
  methods: {
    evolutions() {
      return [
        this.pokemonStore.evolutionOne,
        this.pokemonStore.evolutionTwo,
        this.pokemonStore.evolutionThree,
      ];
    },
    resetApp() {
      this.$router.push('/');
      this.pokemonStore.$reset();
    },
  },
};
</script>

关于你用computed的方式 #

你提到的在computed中返回usePokemonStore()能运行，是因为computed的回调函数会在组件挂载后才执行，此时Pinia已可用。但这种写法每次访问pokemonStore都会调用一次usePokemonStore()（虽然Pinia会返回同一个实例），既不直观也不符合常规使用习惯，因此不推荐。

额外确认 #

你的main.js中Pinia的挂载逻辑是正确的：

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount('#app');

这部分无需修改。

内容的提问来源于stack exchange，提问作者Luis Felipe Gongora Garcia