最近我开始在我的Vue 3项目中使用Pinia作为全局存储。我使用Firebase进行用户身份验证,并尝试在Vue初始化之前加载当前用户。理想情况下,所有与身份验证相关的内容应该在一个单独的文件中,使用Pinia Store。不幸的是(与Vuex不同),在我使用任何action之前,Pinia实例需要在Vue实例之前传递,我认为这就是问题所在。在首次加载时,存储中的user
对象短暂为空。
这是绑定用户的存储action(使用新的Firebase Web v9 Beta)在auth.js
中:
import { defineStore } from "pinia"; import { firebaseApp } from "@/services/firebase"; import { getAuth, onAuthStateChanged, getIdTokenResult, } from "firebase/auth"; const auth = getAuth(firebaseApp); export const useAuth = defineStore({ id: "auth", state() { return { user: {}, token: {}, }; }, actions: { bindUser() { return new Promise((resolve, reject) => { onAuthStateChanged( auth, async (user) => { this.user = user; if (user) this.token = await getIdTokenResult(user); resolve(); }, reject() ); }); }, // ... }})
这是我的main.js
文件:
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import { createPinia } from "pinia"; import { useAuth } from "@/store/auth"; (async () => { const app = createApp(App).use(router).use(createPinia()); const auth = useAuth(); auth.bindUser(); app.mount("#app"); })();
如何在其他任何操作发生之前设置用户?
###我想到了。在异步之后必须注册路由器
雷雷