Vuex: Dynamically registered modules during SSR getting lost on client side state replacement

[rustunn]

If you register store module during SSR (e.g. store.registerModule('name', storeModule); ) and then do store state replacement on the client side (e.g. store.replaceState(window.__INITIAL_STATE__); ), none of the module methods is accessible from within the component throwing an error (module namespace not found in mapGetters/mapState/-//- ).

Pure client or server side works fine, but hydration seems to break.

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[raisezhang]

@rustunn Has this problem been solved?

[Avcajaraville]

I'm having the same problem and can't figure out how to fix it.

[p1pchenk0]

UP, same issue

[artjerom]

Has the problem been resolved? I have the same

[ItsRyanWu]

I can access the module state with store.state.module.data in client-side but failed when using namespace

[ItsRyanWu]

So the reason is that you have registered vuex module in your server-side runtime BUT not in client-side runtime. Unfortunately, the official did not do this for you, so you can register modules by yourself in client-side before mounting app or page.

I assume you divided your modules according to different pages and your module name kept in same with your page route name. So you can do this in your entry-client.js

import { createApp } from './app'

const { app, router, store } = createApp()

if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(()=>{
    // here is the point
    store.registerModule(app.$route.name, {
        namespaced: true,
        state: window.__INITIAL_STATE__[app.$route.name]
    })

    app.$mount('#app')
})

done!