How can i make sure a vuex action has finished before the page loads - vue.js

Question

I have 2 issues where i pull data from an api and use it. However, the page loads before the api request has completed.
My first problem is in the router. I have a requiresAuth, to check if i'm logged in, i have the following:
router:
router.beforeEach((to, from, next) => {
if (!to.matched.some(record => record.meta.requiresAuth)) return next(); // does not require auth, make sure to always call next()!
if (store.getters.isLoggedIn) return next();
store.dispatch('pullUserInfo').then(() => {
if (store.getters.isLoggedIn) return next(); // logged in, move it
next({
path: '/login',
{ redirect: to.fullPath } // save the location we were at to come back later
});
});
});
store action:
pullUserInfo(context) {
fetch(`${process.env.VUE_APP_API_ENDPOINT}/v3/user`)
.then(async r => {
if (r.status !== 200) return context.commit('setUserInfo', null);
const json = await r.json();
context.commit('setUserInfo', json);
});
},
app constructor:
createApp(App)
.use(router)
.use(store)
.mount('#app-mount');
When refreshing, checking in devtools, my userInfo object has data. However this data is set after router.beforeEach checks
My second issue is similar. I populate a table with data from the store, however when refreshing the store value is null because the api request is still ongoing
How do i wait for my action to complete and assure data is present before continuing?
I am using the latest vuex, vue-router and vue3. Working with SFC's and initialized with vue cli

Answer 1

Returning fetch()'s promise did the trick.
This answer was given in the official Vue Discord server
pullUserInfo(context) {
return fetch(`${process.env.VUE_APP_API_ENDPOINT}/v3/user`)
.then(async r => {
if (r.status !== 200) return context.commit('setUserInfo', null);
const json = await r.json();
context.commit('setUserInfo', json);
});
},