From 6975655d7874c6a856a4671151eb11c59a2356de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Tue, 18 Sep 2018 17:21:25 +0200
Subject: [PATCH] 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                           |  5 +++++
 test/e2e/basic.browser.test.js             |  5 +++++
 test/fixtures/basic/nuxt.config.js         |  5 ++++-
 test/fixtures/basic/pages/store-module.vue | 11 +++++++++++
 test/fixtures/basic/plugins/vuex-module.js | 18 ++++++++++++++++++
 test/unit/basic.generate.test.js           |  6 ++++++
 test/unit/basic.ssr.test.js                |  5 +++++
 7 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/basic/pages/store-module.vue
 create mode 100644 test/fixtures/basic/plugins/vuex-module.js

diff --git a/lib/app/index.js b/lib/app/index.js
index 686608f97b..7b9873743d 100644
--- a/lib/app/index.js
+++ b/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
diff --git a/test/e2e/basic.browser.test.js b/test/e2e/basic.browser.test.js
index 86442cceee..a5008c7d30 100644
--- a/test/e2e/basic.browser.test.js
+++ b/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')
 
diff --git a/test/fixtures/basic/nuxt.config.js b/test/fixtures/basic/nuxt.config.js
index 1abd93fded..8223e006d1 100644
--- a/test/fixtures/basic/nuxt.config.js
+++ b/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 } }
diff --git a/test/fixtures/basic/pages/store-module.vue b/test/fixtures/basic/pages/store-module.vue
new file mode 100644
index 0000000000..bae0b6822f
--- /dev/null
+++ b/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>
diff --git a/test/fixtures/basic/plugins/vuex-module.js b/test/fixtures/basic/plugins/vuex-module.js
new file mode 100644
index 0000000000..7dac494a31
--- /dev/null
+++ b/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'
+      }
+    }
+  })
+}
diff --git a/test/unit/basic.generate.test.js b/test/unit/basic.generate.test.js
index 0b9340dc98..8d5c7ea273 100644
--- a/test/unit/basic.generate.test.js
+++ b/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'))
 
diff --git a/test/unit/basic.ssr.test.js b/test/unit/basic.ssr.test.js
index e412ec1079..36bff2be18 100644
--- a/test/unit/basic.ssr.test.js
+++ b/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
   */