feat: Overwrite store.registerModule (#3909)

* feat: Overwrite store.registerModule

Make `store.registerModule` works seamlessly with server-side rendering.

* fix: test failure

lib/app/index.js

@@ -49,6 +49,11 @@ async function createApp (ssrContext) {
   const store = createStore(ssrContext)
   // Add this.$router into store actions/mutations
   store.$router = router
+    <% if (mode === 'universal') { %>
+    // Fix SSR caveat https://github.com/nuxt/nuxt.js/issues/3757#issuecomment-414689141
+    const registerModule = store.registerModule
+    store.registerModule = (path, rawModule, options) => registerModule.call(store, path, rawModule, Object.assign({ preserveState: process.browser }, options))
+    <% } %>
   <% } %>
 
   // Create Root instance

test/e2e/basic.browser.test.js

@@ -50,6 +50,11 @@ describe('basic browser', () => {
     expect(await page.$text('h1')).toBe('My component!')
   })
 
+  test('/store-module', async () => {
+    await page.nuxt.navigate('/store-module')
+    expect(await page.$text('h1')).toBe('mutated')
+  })
+
   test('/css', async () => {
     await page.nuxt.navigate('/css')
 

test/fixtures/basic/nuxt.config.js

@@ -8,6 +8,9 @@ export default {
       maxAge: ((60 * 60 * 24 * 365) * 2)
     }
   },
+  plugins: [
+    '~/plugins/vuex-module'
+  ],
   router: {
     extendRoutes(routes, resolve) {
       return [{
@@ -28,7 +31,7 @@ export default {
       '/async-data',
       '/validate',
       '/redirect',
-
+      '/store-module',
       '/users/1',
       '/users/2',
       { route: '/users/3', payload: { id: 3000 } }

test/fixtures/basic/pages/store-module.vue

@@ -0,0 +1,11 @@
+<template>
+  <h1>{{ $store.state.simpleModule.mutateMe }}</h1>
+</template>
+
+<script>
+export default {
+  fetch({ store }) {
+    store.dispatch('simpleModule/mutate')
+  }
+}
+</script>

test/fixtures/basic/plugins/vuex-module.js

@@ -0,0 +1,18 @@
+export default function ({ store }) {
+  store.registerModule('simpleModule', {
+    namespaced: true,
+    state: () => ({
+      mutateMe: 'not mutated'
+    }),
+    actions: {
+      mutate({ commit }) {
+        commit('mutate')
+      }
+    },
+    mutations: {
+      mutate(state) {
+        state.mutateMe = 'mutated'
+      }
+    }
+  })
+}

test/unit/basic.generate.test.js

@@ -89,6 +89,12 @@ describe('basic generate', () => {
     expect(html.includes('<h1>My component!</h1>')).toBe(true)
   })
 
+  test('/store-module', async () => {
+    const window = await generator.nuxt.renderAndGetWindow(url('/store-module'))
+    const html = window.document.body.innerHTML
+    expect(html.includes('<h1>mutated</h1>')).toBe(true)
+  })
+
   test('/css', async () => {
     const window = await generator.nuxt.renderAndGetWindow(url('/css'))
 

test/unit/basic.ssr.test.js

@@ -19,6 +19,11 @@ describe('basic ssr', () => {
     expect(html.includes('<h1>My component!</h1>')).toBe(true)
   })
 
+  test('/store-module', async () => {
+    const { html } = await nuxt.renderRoute('/store-module')
+    expect(html.includes('<h1>mutated</h1>')).toBe(true)
+  })
+
   /*
   ** Example of testing via dom checking
   */