Vue.js Pinia 沒有安裝？

Question

我不斷收到此錯誤消息：

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.
    at useStore (pinia.mjs?b318:1692:1)
    at eval (App.vue?91a0:77:1)
    at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js (app.js:19:1)
    at __webpack_require__ (app.js:386:33)
    at fn (app.js:642:21)
    at eval (App.vue?vue&type=script&lang=js:5:206)
    at ./src/App.vue?vue&type=script&lang=js (app.js:195:1)
    at __webpack_require__ (app.js:386:33)
    at fn (app.js:642:21)
    at eval (App.vue:3:90)

這是我的 store.js 文件

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => {
    return {
      user: null,
    };
  },
  actions: {
    setUser(username) {
      this.user = username;
    },
  },
});

在 main.js 我有

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";

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

這是 App.vue 文件

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

const store = useUserStore();

export default {
  // setup() {
  //   const store = useUserStore();

  //   return {
  //     // you can return the whole store instance to use it in the template
  //     store,
  //   };
  // },
  name: "app",
  data() {
    return {
      store,
    };
  },
  methods: {
    signOut() {
      auth.signOut().then(() => {
        this.$router.push({ name: "login" });
      });
    },
  },
};
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log(user.email);
    store.setUser(user.email);
  } else {
    console.log("no user");
    store.setUser(null);
  }
});

它起作用了，然后導入了引導程序，然后我一開始就收到了錯誤消息。

我刪除了引導程序，但它仍然不起作用。

有任何想法嗎？

Pinia 通過 npm 安裝。

Answer 1

您在組件設置之外調用pinia

這是不正確的

const store = useUserStore();

export default {
  // setup() {
  //   const store = useUserStore();

  //   return {
  //     // you can return the whole store instance to use it in the template
  //     store,
  //   };
  // },

useUserStore應該在您的setup方法中。

正確的

export default {
   setup() {
     const store = useUserStore();
},