Vue.js中Pinia已安装却报getActivePinia无活跃实例错误

你遇到的getActivePinia was called with no active Pinia错误，核心原因是在Pinia还未挂载到Vue实例时，就调用了useUserStore()。

看你的App.vue代码，const store = useUserStore();写在组件定义的全局作用域中，这段代码会在Vue实例初始化、Pinia挂载之前就执行，自然找不到活跃的Pinia实例。Bootstrap的导入可能只是触发了这个潜在问题的显现，但即使移除Bootstrap，时机错误的问题依然存在。

需要把useUserStore()的调用移到Vue组件的生命周期钩子或setup()函数内部，确保Pinia已经被挂载到应用后再执行。以下是两种可行的修改方式：

方式1：使用Vue3组合式API（推荐） #

import { auth } from "@/firebase";
import { onAuthStateChanged } from "@firebase/auth";
import { useUserStore } from "@/stores/store";
import { useRouter } from 'vue-router';

export default {
  name: "app",
  setup() {
    // 此时Pinia已挂载，可安全调用useUserStore
    const store = useUserStore();
    const router = useRouter();

    // 将auth状态监听放在setup内执行
    onAuthStateChanged(auth, (user) => {
      if (user) {
        console.log(user.email);
        store.setUser(user.email);
      } else {
        console.log("no user");
        store.setUser(null);
      }
    });

    // 重构signOut方法为组合式写法
    const signOut = () => {
      auth.signOut().then(() => {
        router.push({ name: "login" });
      });
    };

    return {
      store,
      signOut
    };
  },
};

方式2：保留选项式API写法 #

import { auth } from "@/firebase";
import { onAuthStateChanged } from "@firebase/auth";
import { useUserStore } from "@/stores/store";

export default {
  name: "app",
  setup() {
    // 在setup中初始化store，确保Pinia已激活
    const store = useUserStore();
    return { store };
  },
  created() {
    // 在组件创建后执行auth状态监听，此时store已可用
    onAuthStateChanged(auth, (user) => {
      if (user) {
        console.log(user.email);
        this.store.setUser(user.email);
      } else {
        console.log("no user");
        this.store.setUser(null);
      }
    });
  },
  methods: {
    signOut() {
      auth.signOut().then(() => {
        this.$router.push({ name: "login" });
      });
    },
  },
};

修改后重新运行项目，错误应该会消失。你的main.js代码是正确的（先创建Pinia再挂载到应用），不需要调整。

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