Can't use store in router.beforeEach. State not updated

[awacode21]

Even if i follow the docs on using the store outside of a component and with ssr, i am not able to update store value within beforeEach navigation guard. The store seems to be available but the store value does not update. I don't understand what i am doing wrong:

main.ts

import { createSSRApp, markRaw } from 'vue';
import { createRouter } from './router';
import { createPinia } from 'pinia';
import App from '/@/App.vue';
import { useLocaleStore } from './store/locale';

// SSR requires a fresh app instance per request, therefore we export a function
// that creates a fresh app instance. If using Vuex/pinia, we'd also be creating a
// fresh store here.
export async function createApp() {
    const app = createSSRApp(App);
    const store = createPinia();
    const router = await createRouter();

    store.use(({ store }) => {
        store.router = markRaw(router)
    });
    
    app.use(store);
    app.use(router);

    router.beforeEach((to, from) => {
        const localeStore = useLocaleStore(store);
        const isLocaleInPath = localeStore.localeUrlRegex.test(to.path);

        if (isLocaleInPath) {
            const toPathLocale = to.path.substring(1,3);
            const fromPathLocale = from.path.substring(1,3);

            if (toPathLocale !== fromPathLocale) {
                localeStore.locale = toPathLocale;
            }
        }
    });

    return { app, router, store }
}

localeStore

import { defineStore, StateTree, StoreDefinition } from 'pinia';
import { markRaw, Ref, unref } from 'vue';


export const useTestStore: StoreDefinition = defineStore('test', {
    state: (): StateTree => {
        const locale = (import.meta.env.VITE_FALLBACK_LOCALE as string);

        const allLocales = (import.meta.env.VITE_LANGUAGES as string).split(',');
  
        if (!allLocales.includes(locale)) {
            allLocales.unshift(locale);
        }

        return {
          locale,
          allLocales,
          localeUrlRegex: markRaw(new RegExp('^/[a-z]{2}(/|$)')),
        }
    },

    getters: {
        getLocaleDate: (state: StateTree) => {
            return (date: Ref<Date> | Date) => new Intl.DateTimeFormat(state.locale, { dateStyle: 'full' }).format(unref(date))
        }
    },
});

[awacode21]

ok , i figured out how to "fix" this. But i don't yet understand it.

When using SSR, i cannot define the navigation guard within the router index.ts nor within main.ts, i need to define it within client-entry after waiting for the route to be ready:

// wait until router is ready before mounting to ensure hydration match
  router.isReady().then(() => { // put router navigation guard declaration here }

when i do it that way, store state is behaving as expected, but i would like to understand the "why" as I thought it should not be important where I define the navigation guard, the only requirement is, that the store usage is wrapped within a deferred call.

[awacode21]

But with this "solution" the navigation guard does not run for the initial route, which is needed...

[awacode21]

Ok, so finally i was able to fix it. For whoever might run into the same problem:
The issue was that i was defining the navigation guard within createApp, but for getting the store state from SSR i waited to do that after router.isReady. That way router worked with another store state then the app. so getting the store state from SSR needs to be done before calling router.isReady(). Then everything works like a charme.

Fixed version:

main.ts

import { createSSRApp, markRaw } from 'vue';
import { createRouter } from './router';
import { createPinia } from 'pinia';
import App from '/@/App.vue';
import { useLocaleStore } from './store/locale';

// SSR requires a fresh app instance per request, therefore we export a function
// that creates a fresh app instance. If using Vuex/pinia, we'd also be creating a
// fresh store here.
export async function createApp() {
    const app = createSSRApp(App);
    const store = createPinia();
    const router = await createRouter();

    store.use(({ store }) => {
        store.router = markRaw(router)
    });
    
	app.use(store);
    app.use(router);

    router.beforeEach((to, from) => {
        const localeStore = useLocaleStore(store);
        const isLocaleInPath = localeStore.localeUrlRegex.test(to.path);
    
        if (isLocaleInPath) {
            const toPathLocale = to.path.substring(1,3);
            const fromPathLocale = from.path.substring(1,3);
    
            if (toPathLocale !== fromPathLocale) {
                localeStore.locale = toPathLocale;
            }
        }
    });

    return { app, router, store }
}

client-entry.ts

import { createApp } from './main';

async function init() {
  const { app, router, store } = await createApp();

  //get ssr rendered store state
  const storeInitialState = window.INITIAL_STATE;

  if (storeInitialState) {
    store.state.value = storeInitialState;
  }

  // wait until router is ready before mounting to ensure hydration match
  router.isReady().then(() => {
    app.mount('#app');
  });
}

init();