最近我开始在我的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");
})();
如何在其他任何操作发生之前设置用户?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
I figured it out. Had to register the router after the async stuff
//main.js (async () => { const app = createApp(App); app.use(createPinia()); const { bindUser } = useAuth(); await bindUser(); app.use(router); app.mount("#app"); })();